fix(gallery): faster image loading

web/pages/gallery.templ

@@ -54,7 +54,9 @@ templ GallerySet(g gallery.Set) {
 	</div>
 }
 
+// Define a templ script to hold complex post-load behavior
 templ GalleryImage(image string, next *gallery.Image, prev *gallery.Image) {
+	<link rel="preload" href={ "/images/" + image + "?w=800" } as="image"/>
 	<div class="relative w-10/12 h-10/12 flex items-center justify-center overflow-hidden ">
 		<!-- 1. Preloaded Base Image (w=800) -->
 		<img
@@ -68,8 +70,8 @@ templ GalleryImage(image string, next *gallery.Image, prev *gallery.Image) {
 			srcset={ "/images/" + image + "?w=400 400w, /images/" + image + "?w=800 800w, /images/" + image + "?w=1200 1200w, /images/" + image + "?w=1600 1600w" }
 			sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
 			alt="Image description"
-			onload="this.classList.remove('opacity-0')"
-			class="absolute inset-0 w-full h-full object-contain transition-opacity duration-300"
+			onload="this.decode().then(() => {this.classList.remove('opacity-0')}).catch(() => {})"
+			class="absolute inset-0 w-full h-full object-contain transition-opacity duration-900 opacity-0"
 		/>
 		<!-- 3. Navigation Controls -->
 		if prev != nil {
@@ -77,6 +79,7 @@ templ GalleryImage(image string, next *gallery.Image, prev *gallery.Image) {
 				hx-get={ templer.RelativePath(ctx, "../"+prev.UID) }
 				hx-target={ "#" + detailsContentID }
 				hx-swap="innerHTML"
+				preload
 				class="absolute left-4 top-1/2 -translate-y-1/2 z-10 p-2 text-white"
 			>
 				&lt;
@@ -87,6 +90,7 @@ templ GalleryImage(image string, next *gallery.Image, prev *gallery.Image) {
 				hx-get={ templer.RelativePath(ctx, "../"+next.UID) }
 				hx-target={ "#" + detailsContentID }
 				hx-swap="innerHTML"
+				preload="mouseover"
 				class="absolute right-4 top-1/2 -translate-y-1/2 z-10 p-2 text-white"
 			>
 				&gt;