feat(comparison): ✨ preload all the images from the comp to improve UI experience (#68)

Author: thezak48

static/css/style.css

@@ -936,3 +936,13 @@ body {
 #mobileImageRendering option:hover {
     background-color: #404040;
 }
+
+#preloadIndicator {
+    z-index: 1000;
+    animation: fadeInOut 2s infinite;
+}
+
+@keyframes fadeInOut {
+    0%, 100% { opacity: 0.7; }
+    50% { opacity: 1; }
+}

static/js/compare.js

@@ -1,6 +1,35 @@
 const { imageUrls, totalColumns, totalRows, imageNames, imageSizes } = compareData;
 let absoluteIndex = 0;
 
+// Replace the existing preloadImages function with this improved version
+function preloadImages() {
+    // Create a promise for each image load
+    const preloadPromises = imageUrls.map(url => {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => resolve(url);
+            img.onerror = () => reject(url);
+            img.src = `/uploads/${url}`;
+        });
+    });
+
+    // Add loading indicator to the page
+    const loadingIndicator = document.createElement('div');
+    loadingIndicator.id = 'preloadIndicator';
+    loadingIndicator.style.cssText = 'position: fixed; bottom: 20px; right: 20px; background: rgba(0,0,0,0.7); color: white; padding: 10px; border-radius: 5px;';
+    loadingIndicator.textContent = 'Loading images...';
+    document.body.appendChild(loadingIndicator);
+
+    // Wait for all images to load
+    Promise.allSettled(preloadPromises)
+        .then(results => {
+            const loaded = results.filter(r => r.status === 'fulfilled').length;
+            const failed = results.filter(r => r.status === 'rejected').length;
+            console.log(`Preloaded ${loaded} images, ${failed} failed`);
+            loadingIndicator.remove();
+        });
+}
+
 // Get both desktop and mobile elements
 const currentImage = document.getElementById('currentImage');
 const currentImageInfoSpan = document.getElementById('currentImageInfo');
@@ -451,6 +480,10 @@ updateDisplay();
 updateNavigation();
 
 document.addEventListener('DOMContentLoaded', () => {
+    // Start preloading images
+    preloadImages();
+    
+    // Check for saved preferences
     const savedViewMode = getCookie('imageViewMode');
     if (savedViewMode === 'original') {
         currentImage.classList.remove('fit');