[Javascript] IntersectionObserver -- Lazy Load Images on a Website

  document.addEventListener(‘DOMContentLoaded‘, () => {
      const lazyImages = Array.from(document.querySelectorAll(‘img.lazy‘));

      if (‘IntersectionObserver‘ in window && ‘IntersectionObserverEntry‘ in window && ‘intersectionRatio‘ in window.IntersectionObserverEntry.prototype) {
          // Define the observer
          let lazyImageObserver = new IntersectionObserver((entries, observer) => {
              entries.forEach((entry) => {
                  // logic for handling interstion
                  if (entry.isIntersecting) {
                      let lazyImage = entry.target
                      lazyImage.src = lazyImage.dataset.src
                      lazyImage.srcset = lazyImage.dataset.srcset
                      lazyImage.classList.remove(‘lazy‘)
                      lazyImageObserver.unobserve(lazyImage)
                  }
              })
          })

          // What to observe
          lazyImages.forEach(lazyImage => {
              lazyImageObserver.observe(lazyImage)
          })
      } else {

      }
  })