Lazy-Loading - JS

lazy-loading.js

document.addEventListener("DOMContentLoaded", function() {
    const lazyLoad = function() {
        const lazyImages = document.querySelectorAll("img[data-src]");

        lazyImages.forEach(img => {
            console.log(img.src, img.dataset.src);
            if (img.getBoundingClientRect().top <= window.innerHeight
                && img.getBoundingClientRect().bottom >= 0
                && getComputedStyle(img).display !== 'none') {
                img.src = img.dataset.src;
                img.removeAttribute("data-src");
            }
        });
    };

    lazyLoad();

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