ArticleZip > How Do You Make Images Load Lazily Only When They Are In The Viewport

How Do You Make Images Load Lazily Only When They Are In The Viewport

Have you ever visited a website and noticed that images only load when you scroll down and they come into view? This nifty feature is called lazy loading, and it's a great way to improve the performance of your web pages. In this article, we'll show you how to implement lazy loading for images on your website so they only load when they are in the viewport.

Lazy loading is a technique that defers the loading of non-essential resources at the time the web page loads. Instead, these resources are only loaded when needed, such as when they are about to come into view as the user scrolls down the page. This can help speed up your website by reducing the initial load time and only fetching resources that are necessary for the current user experience.

To implement lazy loading for images on your website, you can take advantage of the "loading" attribute in HTML. This attribute allows you to specify how the browser should load the image. By setting the value to "lazy", you indicate to the browser that the image should be loaded lazily, only when it's about to be displayed in the viewport.

Here's an example of how you can use the loading attribute for lazy loading:

Html

<img src="image.jpg" loading="lazy" alt="Description of the image">

When the browser encounters this image tag with the loading attribute set to "lazy", it will defer loading the image until it's close to entering the viewport. This can significantly improve the performance of your web page, especially if you have many images or if the images are large in size.

In addition to using the loading attribute, you can also leverage JavaScript libraries such as Intersection Observer to implement lazy loading more dynamically. Intersection Observer is a browser API that allows you to observe when elements enter or exit the viewport. By using Intersection Observer, you can trigger the loading of images precisely when they are about to become visible to the user.

Here's a basic example of how you can use Intersection Observer for lazy loading:

Javascript

const images = document.querySelectorAll('img');

const observer = new IntersectionObserver((entries, observer) =&gt; {
  entries.forEach(entry =&gt; {
    if (entry.isIntersecting) {
      const image = entry.target;
      image.src = image.getAttribute('data-src');
      observer.unobserve(image);
    }
  });
}, {
  root: null,
  rootMargin: '0px',
  threshold: 0.1
});

images.forEach(image =&gt; observer.observe(image));

In this code snippet, we first select all the images on the page. Then, we create a new Intersection Observer instance that watches for each image's entry into the viewport. When an image is about to become visible (isIntersecting), we assign the image's data source (data-src) to its src attribute to trigger the loading process.

Lazy loading images in this manner can help optimize your website's performance and provide a smoother user experience, especially on pages with a substantial amount of imagery. So, give it a try and see the positive impact it can have on your site!

Related posts:

×