Chrome 75 original native support for lazy loading images

April 6, Addy Osmani Google's Chrome & Web platforms engineering manager in his blog posting, introduced to the <img> and <iframe> is loading will add a property: lazy.

Use as follows:

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

Here's an example:

<!-- Lazy-load an offscreen image when the user scrolls near it （img延迟加载）-->
<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中，img会脱离picture）-->
<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延迟加载） -->
<iframe src="video-player.html" loading="lazy"></iframe>

The current version is Chrome 73, the default does not support lazy loading. If you can not wait, you can directly forced on lazy loading characteristics of Chrome.

If nothing else, Chrome 75 will officially support the default picture lazy loading.

Enter the Chrome address bar: chrome: // flags /
Find Enable lazy image loading, the following figure two is set to "Enable"

write by tuantuan

Chrome 75 original native support for lazy loading images

Guess you like