How lazy loading images using JavaScript works?

Question

I am curious about how lazy loading images, images that will be loaded when scrolled to them, works.

Any hint?

Answer 1

2021 - keep it simple...

Lots of plugin recommendations here, and depending on your use case those may be valuable to you.

If you can't be bothered to write this short snippet of code below, or you need callbacks already built out then you can use this plugin I built which is based on this exact answer and only 0.5kb when minified. My plugin, Simply Lazy, can even work with IE if you simply add a polyfill.

At the end of the day if you just need to lazy load some images then it's as simple as:

<img data-src="your-image-path-here" class="lazyload" />

And:

let 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')) {
        // Image has been loaded already
        return;
      }

      // Image has not been loaded so load it
      const sourceUrl = image.getAttribute('data-src');
      image.setAttribute('src', sourceUrl);

      image.onload = () => {
        // Do stuff
      }

      // Removing the observer
      observer.unobserve(image);
    }
  });
});

document.querySelectorAll('.lazyload').forEach((el) => {
  observer.observe(el);
});

Using the Intersection Observer API makes this all very simple. You can also use it within the shadowRoot and it works fine there as well.

I've also found this article helpful to understand what is going on here.