其他分享
首页 > 其他分享> > [HTML5] Native lazy-loading for the web

[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:

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

标签:web,lazy,loading,resource,Chrome,images,iframes
来源: https://www.cnblogs.com/Answer1215/p/11972588.html