Chrome 75將原生支持圖片的延遲加載！

加載頁面時圖片一直是流量的大頭，過多的圖片會嚴重影響頁面的加載速度，針對圖片的性能優化方法有諸如base6四、雪碧圖等等，延遲加載也是其中一種廣泛使用的方法。延遲加載即圖片的懶加載或惰性加載，當頁面初次加載時只加載顯示可視區域的圖片，頁面滾動時，圖片進入了可視區域纔會進行資源的加載。
過去咱們一直經過js來實現圖片的延遲加載，而chrome75的到來將原生支持該功能！其實去年2月份Chrome就首次提出內置的圖片和iframe延遲加載機制，並在8月的Canary版本中加入實驗性功能對其進行了測試，最近Google技術經理Addy Osmani已經宣佈今年5月底Chrome 75將會默認開啓延遲加載的功能。

瀏覽器啓用實驗性功能

對該功能進行體驗和測試須要：

• 下載最新版本Chrome Canary。
• 在chrome://flags中將Enable lazy image loading和Enable lazy frame loading設置爲Enabled。
• 重啓瀏覽器。

loading屬性

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

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

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

檢測屬性支持

判斷瀏覽器是否支持loading屬性（有坑，文章後面會說）：

if ('loading' in HTMLImageElement.prototype) { 
    // 瀏覽器原生支持 `loading` 屬性..
} else {
    // 經過js實現
}

瀏覽器兼容

須要使用例如data-original這樣的屬性名標記資源地址（而不是src、srcset或<source>），以免在不支持該屬性的瀏覽器中當即加載資源：

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

若瀏覽器支持loading屬性，則把data-original替換爲src；若不支持則使用回原來延遲加載的方法：

const images = document.querySelectorAll("img.lazy");
if ('loading' in HTMLImageElement.prototype) {
    images.forEach(img => {
        img.src = img.dataset.original;
    });
} else {
    const LazyLoad = await import('/lazyload.min.js');
    let lazyLoadInstance = new LazyLoad({
        elements_selector: "img.lazy"
    });
}

圖片支持類型

看到這個新功能後原本有個想法是，能夠結合SVG注入器實現SVG的延遲加載：

<img loading='lazy' src="warning.svg" onload="SVGInject(this)" />

但發現對於SVG類型文件，延遲加載並無生效：

經我的不徹底測試，如下爲圖片類型的支持程度：

圖片類型	是否支持
JPEG	支持
GIF	不支持
PNG	支持
APNG	不支持
SVG	不支持

重複請求

須要注意的是，Chrome會在頁面加載時請求須要延遲加載圖片的前2048個字節，當用戶即將滾動到圖片時，Chrome會再次請求剩餘的圖片字節（不會影響該圖片的onload事件）。

若服務器支持範圍請求，則會在前2048個字節中包含圖片尺寸，瀏覽器會生成/展現相同大小的佔位：

各方態度

• 火狐：Firefox的一位工程師表示，Mozilla目前尚未任何計劃實現Chrome的延遲加載方案。
• Microsoft Edge：新的Edge瀏覽器使用了Chromium 75內核，經下載泄露版本測試，該版本在edge://flags/中開啓實驗性功能，可支持延遲加載，且也會重複請求資源，但HTMLImageElement.prototype無loading屬性，只有load屬性，需進行區分判斷處理。
  
• Safari：一位WebKit開發者提到，Apple對這類功能很感興趣：

  

• 其餘：在WICG上關於原生支持延遲加載圖片的討論。

總結

在原代碼的基礎上更新兼容新功能並不複雜，但在啓用新功能前可能須要進一步的思考，好比若對全部圖片設定loading="auto"，某些被延遲加載的圖片是否會影響用戶體驗的流暢性？瀏覽器對圖片進行延遲加載的判斷與決定是否會影響頁面性能？對大量圖片進行延遲加載，瀏覽器會先請求全部延遲加載圖片的前2048個字節，在弱網環境下是否會卡在這個階段反而耽誤了首屏圖片的加載？其餘瀏覽器是否會遵循這種規範？

emmm雖然問題有點多但新功能仍是能夠帶來新玩法～好比之後支持SVG後可對其進行延遲加載，設定loading="eager"可對首屏重要的大圖優先進行加載，對於廣告（iframe或圖片）的數據統計可更加精準（設定延遲加載並在onload事件中統計）...

參考

AddyOsmani.com - Native image lazy-loading for the web!Firefox will support image lazy loading for new tab page | ZDNetTwitter上原討論貼