[HTML5] Native lazy-loading for the web

According to HTTPArchive, images are the most requested asset type for most websites and usually take up more bandwidth than any other resource. At the 90th percentile, sites send about 4.7 MB of images on desktop and mobile.

Currently, there are two ways to defer the loading of off-screen images and iframes:

• Using the Intersection Observer API  [See example]
• Using scroll, resize, or orientationchange event handlers

In Chrome 76, you can use the loading attribute to completely defer the loading of offscreen images and iframes that can be reached by scrolling:

<img src="image.png" loading="lazy" alt="…" width="200" height="200">
<iframe src="https://example.com" loading="lazy"></iframe>

• auto: Default lazy-loading behavior of the browser, which is the same as not including the attribute.
• lazy: Defer loading of the resource until it reaches a calculated distance from the viewport.
• eager: Load the resource immediately, regardless of where it's located on the page.

 

The feature will continue to be updated until it's launched in a stable release (Chrome 76 at the earliest). But you can try it out by enabling the following flags in Chrome:

chrome://flags/#enable-lazy-image-loading

 

Notice: In order to make sure the good user experience, recommend to add the size info for the image:

<img src="..." loading="lazy" width="200" height="200">
<img src="..." loading="lazy" style="height:200px; width:200px;">

 

More detail