lazyloading was always a task to implement while making some web application, now it’s going to be much easier to implement because of the Native Lazy Loading Chrome – New Feature

Introducing the loading attribute

Google new release announcement i.e. Chrome 76 says you can use the loading attribute to lazy load the images and iframes without the custom lazy-loading code or any other use of the javascript library. With this new feature, it’s very easy to implement the lazy loading on images and iframes just by using its simple attribute.

  <img src="celebration.jpg" loading="lazy" alt="..." />
  <iframe src="video-player.html" loading="lazy"></iframe>

Using this attribute we can load image and iframe only when it gets into the viewport.

It is mandatory to add height and width attribute to the <img/> and <iframe></iframe> element or specify the style values directly in an inline style.

The loading attribute

The Loading attribute supports the three different value to defer loading offscreen images and iframes until users scroll near them

• lazy : Enables the lazy loading to images and iframes.
• eager : Loads images and iframes rightaway.
• auto : the browser will determine whether or not to lazily load.

  <!-- DEFAULT LOADING -->
  <img src="image.png" loading="default" alt="cute-cat" width="200" height="200">
  <iframe src="https://example.com" loading="default"></iframe>
  <!-- loads the resource with the default browser behaviour -->

  <!-- EAGER LOADING -->
  <img src="image.png" loading="eager" alt="cute-cat" width="200" height="200">
  <iframe src="https://example.com" loading="eager"></iframe>
  <!-- loads all resources immediately on page load -->

The loading attribute for <img> and <iframe> is being worked on as part of the HTML standard.

Examples:

The loading attribute works on <img> (including with srcset and inside <picture>) as well as on <iframe>:

  <!-- Lazy-load images in <picture>. <img> is the one driving image
  loading so <picture> and srcset fall off of that -->
  <picture>
    <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hq.jpg 2x">
    <source srcset="small.jpg 1x, small-hq.jpg 2x">
    <img src="default.jpg" loading="lazy">
  </picture>

  <!-- Lazy-load an image that has srcset specified -->
  <img src="small.jpg"
       srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
       sizes="(min-width: 36em) 33.3vw, 100vw"
       alt="A red Rose" loading="lazy">

In Other Browser

We should keep in mind the importance of cross-browser support. Support for loading can be feature-detected as follows:

  (async () => {
    if ('loading' in HTMLImageElement.prototype) {
        const images = document.querySelectorAll("img.lazyload");
        images.forEach(img => {
            img.src = img.dataset.src;
        });
    } else {
        // Dynamically import the LazySizes library
        const lazySizesLib = await import('/lazysizes.min.js');
        // Initiate LazySizes (reads data-src & class=lazyload)
        lazySizes.init(); // lazySizes works off a global.
    }
  })();

Browser Settings

however, the lazy load feature is not released a stable version, but we can start testing enabling the flag in chrome browser:

• For image lazy-loading:<#enable-lazy-image-loading
• For iframe lazy-loading:#enable-lazy-frame-loading

Simply go to chrome://flags/ and search the above flags and enable them

A loading=lazy demo featuring exactly 100 kitten pics is available. Check it out!