Google最近發佈了Google Chrome 74，可以通過一個實驗性開關對圖片和iframe開啓原生延遲加載（代號LazyLoad）特性。開啓後，img和iframe標籤會有額外的loading屬性用於配置相關資源的延遲加載行爲。延遲加載不可見內容可以減少數據和內存消耗，同時加快首要內容的展示。
Chrome 74現在支持對頁面不可見區域的圖片和iframe進行延遲加載，直到用戶開始進入到指定的瀏覽距離。這個加載距離取決於網絡速度等因素，內容通常是在剛好變成可見時完成加載。
網頁設計者可以使用img和iframe標籤的loading屬性來控制和影響默認延遲加載行爲：
- lazy：表示這個元素適合延遲加載。
- eager：表示這個元素不適合延遲加載，需要馬上加載。
- auto：讓瀏覽器來決定是否需要延遲加載。當loading屬性設置爲auto時，相當於未設置該屬性。
目前只有Chrome支持延遲加載特性。開發者如果需要跨平臺支持該特性，需要依賴瀏覽器的功能檢測，並使用額外的延遲加載庫，例如lazySizes和vanilla-lazyload。vanilla-lazyload庫作者Andrea Verlicchi在一篇博文中介紹了混合延遲加載。Chrome團隊工程經理Addy Osmani提供了一個示例：
<!-- 正常加載這個圖片 -->
<img src="hero.jpg" alt=".."/>
<!-- 延遲加載其他圖片 -->
<img data-src="unicorn.jpg" loading="lazy" alt=".." class="lazyload"/>
<img data-src="cats.jpg" loading="lazy" alt=".." class="lazyload"/>
<img data-src="dogs.jpg" loading="lazy" alt=".." class="lazyload"/>
<script>
if ('loading' in HTMLImageElement.prototype) {
const images = document.querySelectorAll("img.lazyload");
images.forEach(img => {
img.src = img.dataset.src;
});
} else {
// 動態引入LazySizes庫
let script = document.createElement("script");
script.async = true;
script.src =
"https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.8/lazysizes.min.js";
document.body.appendChild(script);
}
</script>
如果需要嘗試進行延遲加載，可以進入chrome://flags，開啓允許iframe延遲加載（Enable lazy frame loading）和允許圖片延遲加載（Enable lazy image loading）。這將會對標記了loading="lazy"的圖片和iframe開啓延遲加載特性，同時那些標記了loading="auto"或者沒有任何loading屬性的元素將適時進行延遲加載。
Google已經提議將img和iframe的loading屬性作爲HTML標準的一部分。
原文鏈接：