Best JavaScript Methods for Efficiently Loading Multiple Images After Page Load

Many websites use lazy loading to improve performance. For example, on blogs or e-commerce sites, images are loaded as users scroll down, rather than all at once. This ensures a seamless experience without frustrating delays.

The best way to load multiple images after the page has loaded in JavaScript is to use lazy loading or asynchronous image loading. Here are a few effective methods. I have shared three different methods in this post.

fast image load with javascript

1. Using the IntersectionObserver API

This is the most efficient way to lazy-load images. It only loads images when they come into the viewport.

A great example of this in action is this very page. It contains multiple images, but instead of loading all at once, they appear dynamically as you scroll down and enter the viewport, enhancing performance and user experience

Example:

Note: Make sure your images have data-src instead of src.

<body>
    <img data-src="image.jpg" alt="">
</body>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const lazyImages = document.querySelectorAll("img[data-src]");

        const observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const img = entry.target;
                    img.src = img.dataset.src;
                    img.removeAttribute("data-src");
                    observer.unobserve(img);
                }
            });
        });

        lazyImages.forEach(img => observer.observe(img));
    });
</script>

Try it

The IntersectionObserver API is one of the most efficient ways to lazy-load images. It ensures images are loaded only when they come into the viewport, optimizing performance and reducing unnecessary network requests.

This is how it works.

1) Set images to use data-src instead of src: This prevents browsers from loading them before needed.
2) Observe each image element: The API detects when an image enters the user's view.
3) Replace data-src with src when intersecting: This triggers the image load dynamically.

2. Using window.load Event in JavaScript

This method uses JavaScript's window.onload event to dynamically load multiple images after the page has fully loaded. This is one of the most commonly used method.

<body>
    <div id='imageContainer'></div>
</body>
<script>
    window.onload = function () {
        const imgContainer = document.getElementById("imageContainer");
        const images = ["image1.jpg", "image2.jpg", "image3.jpg"];

        images.forEach(src => {
            let img = new Image();
            img.src = src;
            img.alt = "Loaded Image";
            imgContainer.appendChild(img);
        });
    };
</script>

Try it

The window.onload event ensures that the script runs only after the entire page (HTML, CSS, and other assets) has finished loading. This helps prevent blocking the initial page render.

Instead of loading images within the HTML, they are created dynamically after the page loads. This is good for cases where images aren’t immediately necessary (e.g., below-the-fold content)

3. Preloading Images Asynchronously

For better performance, preload images before inserting them into the DOM.

<body>
    <div id='imageContainer'></div>
</body>
<script>
  function preloadImage(src) {
    let img = new Image();
    img.src = src;
    img.onload = function () {
      document.body.appendChild(img);
    };
  }

  ['image1.png', 'image2.png', 'image3.png'].forEach(preloadImage);
</script>

Try it

Conclusion

Which Method Should You Use?

Lazy loading using IntersectionObserver is best if you want images to load only when needed.

window.onload method is useful for loading a batch of images after the page is fully loaded.

Preloading is great if you need images ready before displaying them.

← Previous