intersection-observer-example.js

document.addEventListener("DOMContentLoaded", function() {
  const images = [].slice.call(document.querySelectorAll("lazy-image"));
  if ("IntersectionObserver" in window) {
    /**
      We first check if API in available and then continue to create a simple IntersectionObserver
    */
    let lazyImageObserver = new IntersectionObserver((entries, observer) => {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let image = entry.target;
          image.src = image.dataset.src;
          image.classList.remove("lazy");
          lazyImageObserver.unobserve(image);
        }
      });
    });
    
    images.forEach((lazyImage) => {
      /**
        Telling the Observer to observe each lazyImage
      */
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    /**
      Fallback to use our slow solution using scroll listener
    */
  }
});