With the improvement of browser performance, the front-end also pays more and more attention to user experience, and one of the most important indicators affecting user experience is the rendering speed of the first screen. We often deal with styles, scripts, pictures, audio, video and other resources, such as compression and merging of styles and scripts, merging pictures into Sprite, converting small pictures into base64, delayed loading, etc. to reduce the number of network requests.

Most web applications now contain a large number of pictures. Delayed loading of pictures will undoubtedly greatly improve the user experience. In the past, we might judge whether to load a new image by comparing the bottom image with the distance from the bottom of the viewing area, the height of the window and the distance from the scroll bar, or use the cross-section observer to monitor in browsers that support the Intersection Observer API, which requires us to write scripts to judge and control.

The good news for you today is that Chrome 75 supports lazy loading of native supporting images and delayed loading of img and iframe by setting the loading property to lazy.

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

loading attribute

The Loading property controls whether the browser lazily loads out-of-screen images and iframe s:

• lazy: Delayed loading of resources.
• eager: load resources immediately.
• auto: The browser decides whether to delay loading resources.

The default effect (without setting this property) is consistent with load = auto. It should be noted that if the browser decides that the resource is suitable for delayed loading, it needs to avoid abnormal page display and affect the user experience.

The loading attribute supports img tags, regardless of whether the IMG tag contains the srcset attribute, is wrapped by the picture tag, and the iframe tag.

Sample code:

<!-- Lazy-load an offscreen image when the user scrolls near it -->
<img src="unicorn.jpg" loading="lazy" alt=".."/>

<!-- Load an image right away instead of lazy-loading -->
<img src="unicorn.jpg" loading="eager" alt=".."/>

<!-- Browser decides whether or not to lazy-load the image -->
<img src="unicorn.jpg" loading="auto" alt=".."/>

<!-- 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-hd.jpg 2x">
  <source srcset="small.jpg 1x, small-hd.jpg 2x">
  <img src="fallback.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 rad wolf" loading="lazy">

<!-- Lazy-load an offscreen iframe when the user scrolls near it -->
<iframe src="video-player.html" loading="lazy"></iframe>

Detection attribute support

Determine whether the browser supports loading attributes

<script>
if ('loading' in HTMLImageElement.prototype) { 
    // Browser supports `loading`..
} else {
   // Fetch and apply a polyfill/JavaScript library
   // for lazy-loading instead.
}
</script>

Browser Compatibility

The emergence of a new feature is bound to be incompatible with all browsers immediately, which requires us to do backward compatibility in combination with the previous data-src lazy loading mode, instead of using src, srcset, <source> to avoid browsers that do not support the original lazy loading function to load resources immediately.

<img loading="lazy" data-src="pic.png" class="lazyload" alt="." />

Browsers that do not support native lazy loading are not supported. We use the lazy Sizes library for compatibility.

(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.
    }
})();

Request details

Native lazy loading captures the first 2KB image when the page is loaded. If the server supports range requests, the first 2KB may contain image size, which enables us to generate/display placeholders of the same size. Of course, the first 2KB may also include the entire image of an asset like an icon.

Taste fresh

At the time of this article's release, the latest version of chrome was 73.0.3683.103, but we can turn this feature on by enabling the browser's experimental functionality.

Search lazy on the chrome://flags page, set Enable lazy image loading and Enable lazy frame loading to Enable, and restart the browser.

Reference resources

• AddyOsmani.com - Native image lazy-loading for the web!
• Twitter - Addy Osmani original post

Welcome to pay attention to the public number "Front-end New Horizon" to obtain frontier technology information. Backstage reply "1" to collect 100 PDF front-end e-books.