46 lines
1.3 KiB
JavaScript
46 lines
1.3 KiB
JavaScript
// 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);
|
|
});
|
|
}
|
|
});
|
|
});
|