me/nodejs-website
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Lazy load image content. Improves performance for casual viewing.

Browse Source
This commit is contained in:
Hyperling
2025-12-01 08:26:45 -07:00
parent 2dcdfc745a
commit cae8acda27
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
pages/photos.sh
View File

@@ -146,14 +146,14 @@ function build_album_pages {
echo -en "\t\t\t\t<$a href='/$photo'>" >> $subpage
# Determine what type of media it is, and how to display it.
if [[ $photo == *".mp4" ]]; then
echo -e "\t\t\t\t\t<video width='320px' controls>" >> $subpage
echo -e "\t\t\t\t\t<video width='320px' preload='metadata' controls>" >> $subpage
echo -e "\t\t\t\t\t\t<source src='/$photo' type=video/mp4>" >> $subpage
echo -e "\t\t\t\t\t\tYour browser does not support videos." >> $subpage
echo -e "\t\t\t\t\t</video>" >> $subpage
elif [[ $photo == *".md" || $photo == *".txt" ]]; then
echo -e "\t\t\t\t\t<p>`cat $photo`</p>" >> $subpage
else
echo -e "\t\t\t\t\t<img src='/$photo' alt=''>" >> $subpage
echo -e "\t\t\t\t\t<img src='/$photo' loading='lazy' alt=''>" >> $subpage
fi
# Check if it needs an extra descriptive detail.
echo -en "\t\t\t\t\t<p>$filename" >> $subpage
@@ -229,11 +229,11 @@ function build_all_page {
dir_name="${dir_name//_/ }"
dir_name="${dir_name//-/ }"
media="<img src='$media_uri' alt='' style='width:100%'>"
media="<img src='$media_uri' alt='' loading='lazy' style='width:100%'>"
# Determine how to show the file.
if [[ $media_uri == *".mp4" ]]; then
media="<video controls style='width:100%'>"
media="<video style='width:100%' preload='metadata' controls>"
media="${media}<source src='$media_uri' type=video/mp4>"
media="${media}Your browser does not support videos."
media="${media}</video>"