1st commit

src/public/js/lazy.js

@@ -0,0 +1,45 @@
+// js for Lumeex
+// https://git.djeex.fr/Djeex/lumeex
+
+window.addEventListener("DOMContentLoaded", () => {
+  // Lazy loading
+  const lazyImages = document.querySelectorAll('img.lazyload');
+
+  const observer = new IntersectionObserver((entries, obs) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        const img = entry.target;
+        console.log("Lazy-loading image:", img.dataset.src);
+        img.src = img.dataset.src;
+        img.onload = () => {
+          img.classList.add("loaded");
+        };
+        obs.unobserve(img);
+      }
+    });
+  }, {
+    rootMargin: "0px 0px 300px 0px",
+    threshold: 0.01
+  });
+
+  lazyImages.forEach(img => observer.observe(img));
+
+  // Fade-in effect for loaded images (even outside lazy ones)
+  const fadeImages = document.querySelectorAll("img.fade-in-img");
+
+  fadeImages.forEach(img => {
+    const onLoad = () => {
+      console.log("Image loaded (fade-in):", img.src);
+      img.classList.add("loaded");
+    };
+
+    if (img.complete && img.naturalHeight !== 0) {
+      onLoad(); // already loaded
+    } else {
+      img.addEventListener("load", onLoad, { once: true });
+      img.addEventListener("error", () => {
+        console.warn("Image failed to load:", img.dataset.src || img.src);
+      });
+    }
+  });
+});