HTML

html lazy loading images

<img loading="lazy" src="https://via.placeholder.com/320x200" alt="Lazy loaded image" />

html lazy load images

<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">

lazy load image

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

Lazy loading images

const imgTargets = document.querySelectorAll("img[data-src]");

const imgObserve = function (entries, observer) {
  const [entry] = entries;
  console.log(entry);

  //replace src with data-src
  if (!entry.isIntersecting) {
    return;
  }
  entry.target.src = entry.target.dataset.src;

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

  observer.unobserve(entry.target);
};

const imgOptions = {
  root: null,
  threshold: 0,
  rootMargin: "200px",
};

const imgObserver = new IntersectionObserver(imgObserve, imgOptions);

imgTargets.forEach(function (img) {
  imgObserver.observe(img);
});