Lazy loading using the Intersection Observer API

Intersection Observer API is an API that detects elements using the isIntersecting property.

The API helps us detect unobserved elements and whether an image has the src or data-src attribute.

We select the URL from the data-src attribute and move it to the src attribute for the browser to load the image.

<div id="imgs_inside" style="width:600px; height: 600px; margin-bottom:5px; overflow: scroll;">
  <img src="https://www.lookkle.com/images/test/p_1.JPG" width="300" height="300">
  <img src="https://www.lookkle.com/images/test/p_2.JPG" width="300" height="300">
  <img class="lazy" data-src="https://www.lookkle.com/images/test/p_3.JPG" width="300" height="300">
  <img class="lazy" data-src="https://www.lookkle.com/images/test/p_4.JPG" width="300" height="300">
  <img class="lazy" data-src="https://www.lookkle.com/images/test/p_5.JPG" width="300" height="300">
  <img class="lazy" data-src="https://www.lookkle.com/images/test/p_6.JPG" width="300" height="300">
</div>
<script>
var observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(function (entry) {
    if (entry.intersectionRatio > 0 || entry.isIntersecting) {
      const image = entry.target;
      observer.unobserve(image);
      if (image.hasAttribute('src')) {
        return;
      }
      const sourceUrl = image.getAttribute('data-src');
      image.setAttribute('src', sourceUrl);
      observer.unobserve(image);
    }
  });
});

document.querySelectorAll('.lazy').forEach((el) => {
  observer.observe(el);
});
</script>