Improved Performance

index.html

@@ -808,14 +808,26 @@
         });
         
         function updateMenuImage() {
+            // Remove the animation class to reset the effect
             menuImage.classList.remove('flip-in');
-            void menuImage.offsetWidth; // Trigger reflow
-            menuImage.classList.add('flip-in');
-            
-            setTimeout(() => {
-                menuImage.src = `img/CANIE MENU_page_${currentPage}.png`;
+        
+            // Create a new image element to preload the next page
+            const newImg = new Image();
+            newImg.src = `img/CANIE MENU_page_${currentPage}.png`;
+        
+            // When the new image is loaded, update the menu image and apply the animation
+            newImg.onload = () => {
+                menuImage.src = newImg.src;
                 currentPageDisplay.textContent = currentPage;
-            }, 300);
+                // Trigger a reflow to restart the animation and add the class back
+                void menuImage.offsetWidth;
+                menuImage.classList.add('flip-in');
+            };
+        
+            // Optionally, handle errors if the image fails to load
+            newImg.onerror = () => {
+                console.error('Failed to load image:', newImg.src);
+            };
         }
         
         // Smooth scrolling for navigation links