Chrome 75 將原生支持圖片的惰性加載

隨着瀏覽器性能的提高，前端也愈來愈關注用戶體驗，而影響用戶體驗其中一個很重要的指標即是受首屏渲染速度。咱們經常會針對樣式、腳本、圖片、音頻、視頻等資源作處理，好比針對樣式和腳本的壓縮合並，將圖片合併成雪碧圖、將小圖轉化成base6四、延遲加載等減小網絡請求次數。

如今大部分web應用含有大量的圖片，對圖片進行延遲加載無疑極大提高用戶體驗。以往咱們可能會經過對比底部圖片據可視區底部距離、窗口高度、滾動條距離來判斷是否加載新圖片，抑或在支持IntersectionObserver API的瀏覽器中使用交叉區觀察者進行監聽，而這都須要咱們寫腳本去判斷及控制。

今天給你們帶來好消息是，Chrome 75 將原生支持圖片的惰性加載，支持對img和iframe進行延遲加載，只須要將loading屬性設置爲lazy便可。

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

loading屬性

Loading屬性控制瀏覽器是否延遲加載屏幕外的圖像和iframe：

• lazy：對資源進行延遲加載。
• eager：當即加載資源。
• auto：瀏覽器自行判斷決定是否延遲加載資源。

默認效果（不設置該屬性）和loading=auto的效果保持一致。須要注意的是，若瀏覽器決定該資源適合延遲加載，則須要避免頁面不正常顯示和影響用戶體驗。

該loading屬性支持img標籤，不管img標籤是否含有srcset屬性及被picture標籤包裹，以及iframe標籤。

示例代碼：

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

檢測屬性支持

判斷瀏覽器是否支持loading屬性

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

瀏覽器兼容

一個新特性的出現必然沒法當即兼容全部的瀏覽器，這須要咱們結合以往的data-src進行懶加載的方式做向後兼容，而不是使用src、srcset、<source>，以免不支持原生懶加載功能的瀏覽器對資源進行當即加載。

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

不支持原生懶加載的瀏覽器，咱們使用lazySizes庫進行兼容

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

請求細節

原生懶加載在頁面加載時獲取前2KB的圖像。若是服務器支持範圍請求，則前2KB可能包含圖像尺寸，這使咱們可以生成/顯示具備相同尺寸的佔位符。固然前2KB也可能包括像圖標這樣的資產的整個圖像。

嚐鮮

在本篇文章發佈時，chrome最新版本是73.0.3683.103，但咱們能夠經過啓用瀏覽器的實驗性功能開啓這一特性。

在chrome://flags頁面搜索lazy，將Enable lazy image loading和Enable lazy frame loading設置爲Enabled，重啓瀏覽器便可。

參考

• AddyOsmani.com - Native image lazy-loading for the web!
• Twitter - AddyOsmani 原帖

歡迎關注公衆號「前端新視界」獲取前端技術前沿資訊，後臺回覆「1」領取100本PDF前端電子書籍。