lazyLoadingImages.md

[JavaScript] - Lazy Loading Images - Intersection Observer API

SOURCE

<div class="features">
        <img
          src="img/digital-lazy.jpg"
          data-src="img/digital.jpg"
          alt="Computer"
          class="features__img lazy-img"
        />
        ...
        
      <img
          src="img/grow-lazy.jpg"
          data-src="img/grow.jpg"
          alt="Plant"
          class="features__img lazy-img"
        />

.lazy-img {
  filter: blur(20px);
}

const imgTargets = document.querySelectorAll('img[data-src]'); // only select the images with `data-src` attribute

const loadImg = function (entries, observer) {
  const [entry] = entries;

  if (!entry.isIntersecting) return;

  // Replace src with data-src
  entry.target.src = entry.target.dataset.src;

  entry.target.addEventListener('load', function () {
    entry.target.classList.remove('lazy-img');
  });

  observer.unobserve(entry.target);
};

const imgObserver = new IntersectionObserver(loadImg, {
  root: null,
  threshold: 0,
  rootMargin: '200px', // load image before we enter the viewport so that we don't have to wait
});

imgTargets.forEach(img => imgObserver.observe(img));