Lazy load image content. Improves performance for casual viewing.

pages/helpers/menu.php

@@ -51,10 +51,10 @@
 					target="_blank" rel="noopener noreferrer">Videos</a>
 				<a href="/photos/">Photos</a>
 				| Blog:
-				<a href="https://recipes.hyperling.com/categories/recipes//"
+				<a href="https://recipes.hyperling.com/categories/recipes/"
 					target="_blank" rel="noopener noreferrer">Recipes</a>
-				<a href="https://works.hyperling.com/categories/musings/"
+				<a href="https://blog.hyperling.com/categories/musings/"
 					target="_blank" rel="noopener noreferrer">Poetry</a>
-				<a href="https://works.hyperling.com/categories/guides/"
+				<a href="https://blog.hyperling.com/categories/guides/"
 					target="_blank" rel="noopener noreferrer">Guides</a>
 		</div>

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>"