{ // Skip images that are already lazy-loaded if (img.dataset.src) return; // Save the original src value in data-src img.dataset.src = img.src; // Set a placeholder or empty src to prevent immediate loading img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; // 1x1 pixel transparent gif img.classList.add('lazy'); }); const lazyImages = document.querySelectorAll('img.lazy'); if ("IntersectionObserver" in window) { let lazyImageObserver = new IntersectionObserver(function(entries, observer) { entries.forEach(function(entry) { if (entry.isIntersecting) { let lazyImage = entry.target; lazyImage.src = lazyImage.dataset.src; lazyImage.classList.remove("lazy"); lazyImageObserver.unobserve(lazyImage); } }); }); lazyImages.forEach(function(lazyImage) { lazyImageObserver.observe(lazyImage); }); } else { // Fallback for browsers that don't support IntersectionObserver let lazyLoadThrottleTimeout; function lazyLoad() { if (lazyLoadThrottleTimeout) { clearTimeout(lazyLoadThrottleTimeout); } lazyLoadThrottleTimeout = setTimeout(function() { const scrollTop = window.pageYOffset; lazyImages.forEach(function(img) { if (img.offsetTop < window.innerHeight + scrollTop) { img.src = img.dataset.src; img.classList.remove('lazy'); } }); if (lazyImages.length == 0) { document.removeEventListener("scroll", lazyLoad); window.removeEventListener("resize", lazyLoad); window.removeEventListener("orientationchange", lazyLoad); } }, 20); } document.addEventListener("scroll", lazyLoad); window.addEventListener("resize", lazyLoad); window.addEventListener("orientationchange", lazyLoad); } });