From cae8acda2723fb0524ebc58d9144d959141bc0e4 Mon Sep 17 00:00:00 2001
From: Hyperling <me@hyperling.com>
Date: Mon, 1 Dec 2025 08:26:45 -0700
Subject: [PATCH] Lazy load image content. Improves performance for casual
 viewing.

---
 pages/photos.sh | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/pages/photos.sh b/pages/photos.sh
index 8cd0222..08a310a 100755
--- a/pages/photos.sh
+++ b/pages/photos.sh
@@ -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>"