Update templates/menu.html

templates/menu.html

@@ -9,6 +9,12 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
     <!-- Preload Placeholder Image -->
     <link rel="preload" href="/static/placeholder.jpg" as="image">
+    <!-- Preload First Few Menu Item Images (Example) -->
+    {% for section, items in ordered_menu.items() %}
+        {% for item in items[:2] %} <!-- Preload images for the first 2 items in each section -->
+            <link rel="preload" href="{{ item.Image1__c }}" as="image">
+        {% endfor %}
+    {% endfor %}
     <style>
         body {
             font-family: Arial, sans-serif;
@@ -40,6 +46,11 @@
             width: 100%;
             object-fit: fill;
             border-radius: 15px 15px 0 0;
+            opacity: 0; /* Initially hidden for fade-in effect */
+            transition: opacity 0.5s ease-in-out;
+        }
+        .menu-image.loaded {
+            opacity: 1; /* Fade in when loaded */
         }
         .card-title {
             font-size: 1.2rem;
@@ -412,9 +423,19 @@
                     {% for item in items %}
                         <div class="col-md-6 mb-4">
                             <div class="card menu-card">
-                                <img src="{{ item.Image1__c }}" class="card-img-top menu-image" alt="{{ item.Name }}"
-                                    width="350" height="200" loading="lazy"
-                                    onerror="this.src='/static/placeholder.jpg';">
+                                <!-- Use <picture> for WebP with fallback -->
+                                <picture>
+                                    <!-- Assume item.Image1__c_webp is the WebP version (server-side generated) -->
+                                    <source srcset="{{ item.Image1__c_webp if item.Image1__c_webp else item.Image1__c }}" type="image/webp">
+                                    <img src="{{ item.Image1__c }}"
+                                         srcset="{{ item.Image1__c }} 350w, {{ item.Image1__c_small if item.Image1__c_small else item.Image1__c }} 175w"
+                                         sizes="(max-width: 576px) 175px, 350px"
+                                         class="card-img-top menu-image"
+                                         alt="{{ item.Name }}"
+                                         width="350" height="200"
+                                         loading="lazy"
+                                         onerror="this.src='/static/placeholder.jpg';">
+                                </picture>
                                 <div class="addbutton">
                                     <div class="card-body d-flex align-items-center justify-content-between">
                                         <div>
@@ -505,26 +526,43 @@
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
 
     <script>
-        // Lazy Load Menu Items with Intersection Observer
+        // Lazy Load Menu Items and Images with Intersection Observer
         document.addEventListener('DOMContentLoaded', function () {
             const menuCards = document.querySelectorAll('.menu-card');
+            const menuImages = document.querySelectorAll('.menu-image');
 
-            const observer = new IntersectionObserver((entries, observer) => {
+            // Observer for menu cards (to show the card when in viewport)
+            const cardObserver = new IntersectionObserver((entries, observer) => {
                 entries.forEach(entry => {
                     if (entry.isIntersecting) {
                         entry.target.classList.add('visible');
-                        observer.unobserve(entry.target); // Stop observing once visible
+                        observer.unobserve(entry.target);
                     }
                 });
             }, {
                 root: null,
                 rootMargin: '0px',
-                threshold: 0.1 // Trigger when 10% of the card is visible
+                threshold: 0.1
             });
 
-            menuCards.forEach(card => {
-                observer.observe(card);
+            // Observer for images (to add fade-in effect when loaded)
+            const imageObserver = new IntersectionObserver((entries, observer) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        const img = entry.target;
+                        img.onload = () => img.classList.add('loaded');
+                        img.onerror = () => img.classList.add('loaded'); // Ensure fade-in even if image fails
+                        observer.unobserve(img);
+                    }
+                });
+            }, {
+                root: null,
+                rootMargin: '0px',
+                threshold: 0.1
             });
+
+            menuCards.forEach(card => cardObserver.observe(card));
+            menuImages.forEach(img => imageObserver.observe(img));
         });
 
         // Debounce Function for Search
@@ -745,7 +783,7 @@
                 
                 if (itemName.includes(input) || (itemSection && itemSection.includes(input))) {
                     item.style.display = 'block';
-                    item.classList.add('visible'); // Ensure visible items are marked as such
+                    item.classList.add('visible');
                     matchedSections.add(item.closest('.row'));
                 } else {
                     item.style.display = 'none';