Chrome 75 將原生支持圖片懶加載

4 月 6 日，Google 的 Chrome & Web 平臺工程經理 Addy Osmani 在我的博客發文，介紹到 <img> 和 <iframe> 的 loading 將新增一個屬性：lazy。

使用方法以下：

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

範例以下：

<!-- 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>

目前 Chrome 版本是 73，默認不支持懶加載。若是你等不急，能夠直接強制開啓 Chrome 的懶加載特性。

 若是不出意外，Chrome 75 將正式默認支持圖片懶加載。

• 在 Chrome 地址欄中輸入：chrome://flags/

• 查找 Enable lazy image loading，把下圖中兩項設置成「Enable」

 

write by tuantuan