lazyloading.js

// Lazy Load images w/ IntersectionObserver
let lazyImages = [].slice.call(document.querySelectorAll("img"));
let active = false;

const lazyLoadImages = () => {
  if (active === false) {
    active = true;

    lazyImages.forEach((lazyImage) => {
      if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
        lazyImage.src = lazyImage.src;
        lazyImage.srcset = lazyImage.srcset;

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

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

    active = false;
  
  }
};

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