Optmial Image Loading

templates/index.html

@@ -49,6 +49,9 @@
             max-width: 100%;
             height: auto;
             display: block;
+            flex-grow: 1;
+            object-fit: contain;
+            transition: opacity 0.3s ease;
         }
 
         .date-overlay {
@@ -198,10 +201,13 @@
             polaroidElement.style.backgroundColor = `${polaroid.highlightColor}33`;
             
             const img = document.createElement('img');
-            img.src = polaroid.imgSrc;
             img.alt = polaroid.caption;
             img.setAttribute('data-original-width', polaroid.width);
             img.setAttribute('data-original-height', polaroid.height);
+            img.setAttribute('data-base-src', polaroid.imgSrc);
+            img.src = polaroid.imgSrc;
+            
+            img.onload = () => loadOptimalThumbnail(img); // Load optimal thumbnail after initial load
             
             const dateOverlay = document.createElement('div');
             dateOverlay.className = 'date-overlay';
@@ -231,6 +237,42 @@
 
         }
 
+        function getOptimalThumbnailSize(width, height) {
+            const sizes = [256, 512, 768, 1024, 1536, 2048];
+            const maxDimension = Math.max(width, height);
+            return sizes.find(size => size >= maxDimension) || sizes[sizes.length - 1];
+        }
+
+        function loadOptimalThumbnail(img) {
+            // Use a small delay to ensure the image has rendered
+            setTimeout(() => {
+                const containerWidth = img.offsetWidth;
+                const containerHeight = img.offsetHeight;
+                const devicePixelRatio = window.devicePixelRatio || 1;
+                
+                // If dimensions are still 0, use the original image dimensions
+                const width = containerWidth || parseInt(img.getAttribute('data-original-width'));
+                const height = containerHeight || parseInt(img.getAttribute('data-original-height'));
+                
+                const optimalSize = getOptimalThumbnailSize(
+                    width * devicePixelRatio,
+                    height * devicePixelRatio
+                );
+                
+                const newSrc = img.getAttribute('data-base-src').replace('1536_', `${optimalSize}_`);
+                
+                if (newSrc !== img.src) {
+                    const tempImg = new Image();
+                    tempImg.onload = function() {
+                        img.src = newSrc;
+                        img.style.opacity = 1;
+                    };
+                    tempImg.src = newSrc;
+                    img.style.opacity = 0.5;
+                }
+            }, 100); // 100ms delay
+        }
+
         function handleResize() {
             const polaroids = document.querySelectorAll('.polaroid');
             polaroids.forEach(polaroid => {
@@ -238,6 +280,7 @@
                 const width = parseInt(img.getAttribute('data-original-width'));
                 const height = parseInt(img.getAttribute('data-original-height'));
                 positionPolaroid(polaroid, { width, height });
+                loadOptimalThumbnail(img);
             });
         }
 
@@ -255,6 +298,7 @@
                     const polaroidElement = createPolaroid(polaroid);
                     positionPolaroid(polaroidElement, polaroid);
                     gridContainer.appendChild(polaroidElement);
+                    // loadOptimalThumbnail is now called in the img.onload event
                 });
 
                 hasMore = data.hasMore;
@@ -274,6 +318,7 @@
         }
 
         window.addEventListener('scroll', handleScroll);
+        window.addEventListener('resize', handleResize);
 
         loadImages(); // Initial load
     </script>