defer image loading

script.js

document.addEventListener("DOMContentLoaded", function() {
    const srcDeferAttribute = "data-defer";
    const srcBackingAttribute = "data-deferred";

    document.querySelectorAll("*[" + srcDeferAttribute + "]").forEach(function(lazyImage) {
        if (!lazyImage.complete) {
            lazyImage.setAttribute(srcBackingAttribute, lazyImage.getAttribute("src"));
            lazyImage.setAttribute("src", "data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=");
        }
        lazyImage.removeAttribute(srcDeferAttribute);
    });

    let lazyImages = [].slice.call(document.querySelectorAll("*[" + srcBackingAttribute + "]"));
    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") {
                        lazyImage.setAttribute("src", lazyImage.getAttribute(srcBackingAttribute));
                        lazyImage.removeAttribute(srcBackingAttribute);

                        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);
        }
    };

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