openclassify/addons/default/visiosoft/base-theme/resources/js/lazy-loading.js

document.addEventListener("DOMContentLoaded", function() {
    var lazyImages = [].slice.call(document.querySelectorAll(".lazy"));

    if ("IntersectionObserver" in window) { // If intersection observer is supported
        let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    let lazyImage = entry.target;
                    if (lazyImage.dataset.background) {
                        lazyImage.style.backgroundImage = `url('${lazyImage.dataset.background}')`
                    } else {
                        lazyImage.src = lazyImage.dataset.src;
                    }
                    lazyImage.classList.remove("lazy");
                    lazyImageObserver.unobserve(lazyImage);
                }
            });
        });

        lazyImages.forEach(function(lazyImage) {
            lazyImageObserver.observe(lazyImage);
        });
    } else { // Fallback if intersection observer is not supported
        let active = false;

        const lazyLoad = function() {
            if (active === false) {
                active = true;

                setTimeout(function() {
                    lazyImages.forEach(function(lazyImage) {
                        if ((lazyImage.getBoundingClientRect().top <= window.innerHeight
                            && lazyImage.getBoundingClientRect().bottom >= 0)
                            && getComputedStyle(lazyImage).display !== "none") {
                            if (lazyImage.dataset.background) {
                                lazyImage.style.backgroundImage = `url('${lazyImage.dataset.background}')`
                            } else {
                                lazyImage.src = lazyImage.dataset.src;
                            }
                            lazyImage.classList.remove("lazy");

                            lazyImages = lazyImages.filter(function(image) {
                                return image !== lazyImage;
                            });

                            if (lazyImages.length === 0) {
                                document.removeEventListener("scroll", lazyLoad);
                                window.removeEventListener("resize", lazyLoad);
                                window.removeEventListener("orientationchange", lazyLoad);
                            }
                        }
                    });

                    active = false;
                }, 200);
            }
        };

        document.addEventListener("scroll", lazyLoad);
        window.addEventListener("resize", lazyLoad);
        window.addEventListener("orientationchange", lazyLoad);
    }
});