圖片延遲加載對(duì)于用戶來(lái)說(shuō)可以降低瞬時(shí)的帶寬占用，對(duì)于網(wǎng)站和開(kāi)發(fā)者來(lái)說(shuō)也可以分散服務(wù)器請(qǐng)求帶寬的壓力。通常要想實(shí)現(xiàn)圖片延遲加載需要使用某些腳本技術(shù)，不過(guò)谷歌瀏覽器此前已提出新的更便捷的圖片延遲加載建議。這些建議已經(jīng)獲得網(wǎng)頁(yè)超文本應(yīng)用技術(shù)工作組 (WHATWG) 的認(rèn)可，現(xiàn)在谷歌提出的建議也已經(jīng)成為HTML標(biāo)準(zhǔn)。成為技術(shù)標(biāo)準(zhǔn)后各大瀏覽器目前正在更新以兼容這些標(biāo)準(zhǔn)，比如火狐瀏覽器目前已經(jīng)在每夜構(gòu)建版里測(cè)試該標(biāo)準(zhǔn)。

開(kāi)發(fā)者們現(xiàn)在可以測(cè)試該標(biāo)準(zhǔn)： 

據(jù)謀智基金會(huì)的更新公告，目前在火狐瀏覽器的每夜構(gòu)建版中已經(jīng)增加相關(guān)標(biāo)準(zhǔn)，開(kāi)發(fā)者現(xiàn)在可以提前進(jìn)行測(cè)試。要想進(jìn)行測(cè)試的話需要安裝火狐瀏覽器每夜構(gòu)建版，然后轉(zhuǎn)到about:config配置頁(yè)面搜索lazy相關(guān)的實(shí)驗(yàn)性項(xiàng)目。找到dom.image-lazy-loading.enabled后將其布爾值由默認(rèn)值修改為True即可，然后可以通過(guò)該頁(yè)面進(jìn)行測(cè)試。若網(wǎng)頁(yè)顯示HTMLImageElement顯示True代表支持延遲加載，若顯示HTMLImageElement顯示False則不支持。

圖片或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>