Load images separated from page loading

Question

I am currently using lazy loading of images, in which all the images are loaded while page is loading and displayed after an image is loaded. In this method, page is shown loading at the tab section of browser till all the images are downloaded.

Now, I want to load the images separate from page loading. Like in google images, page is loaded within 1 second, and images are loaded one by one without showing the page loading in the tab of browser.

How can I achieve this?

So, the final question: How to first load the page fully, without downloading the images from server, and then download the image when the scroller is reached there. Till then, the image may be a grey box.

Answer 1

Loading an image when it comes into view.

Loading attribute

We could use native lazy loading with the loading attribute .

Here's a demo .

<div><img src="https://placeimg.com/410/410/any" loading="lazy" width="410" height="410"></div>

Currently, the latest version of Chrome, Firefox and Edge support native lazy loading.

Be aware that the distance threshold does vary in browsers.

Chrome

The distance threshold after which the deferred content will start loading-in depends on factors including the current effective connection type, and whether Lite mode is enabled. The distance is chosen so that the deferred content almost always finishes loading by the time it becomes visible.

Firefox

Tells the user agent to hold off on loading the image until the browser estimates that it will be needed imminently. For instance, if the user is scrolling through the document, a value of lazy will cause the image to only be loaded shortly before it will appear in the window's visual viewport.

Intersection Observer

We could also use the IntersectionObserver API to determine when your images are in view. This offers better compatibility across browsers and offers greater control for when and how our images load.

CodePen

HTML

<div>
    <img src="data:," 
        data-src="https://placeimg.com/410/410/any" 
        class="lazy" 
        alt="" 
        width="410" 
        height="410" />
</div>

JS

document.addEventListener("DOMContentLoaded", lazyLoad);

function lazyLoad() {
  const images = [].slice.call(document.querySelectorAll("img.lazy"));
  var config = {
    // If the image gets within 500px in the Y axis, start the download.
    rootMargin: "500px 0px",
    // detect when visibility passes the 1% mark
    threshold: 0.01
  };

  if ("IntersectionObserver" in window) {
    const observer = new IntersectionObserver(showImage, config);

    images.forEach(function (image) {
      observer.observe(image);
    });
  }
}

function showImage(entries, observer) {
  entries.forEach(function (entry) {
    if (entry.isIntersecting) {
      const image = entry.target;
      image.src = image.dataset.src;

      observer.unobserve(image);
    }
  });
}

Existing libraries

There are also existing JavaScript libraries, such as lazySizes .