懶加載是一種延時(shí)加載屏幕可視范圍之外的資源加載辦法，也就是說，當(dāng)用戶打開網(wǎng)頁時(shí)，先不加載屏幕可視范圍之外的資源，等這些資源出現(xiàn)在在了可視范圍中時(shí)，再開始加載。這種處理辦法可以降低網(wǎng)頁首屏的 HTTP 請(qǐng)求數(shù)，提高首屏的加載速度，對(duì)于圖片資源比較多的網(wǎng)站，效果尤其顯著。

什么是瀏覽器原生懶加載

以前，我們實(shí)現(xiàn)網(wǎng)頁圖片懶加載功能是通過 JavaScript 實(shí)現(xiàn)的，最新 Chrome 瀏覽器開始為我們提供了原生懶加載功能，該功能Chrome 74 版本開始提供試驗(yàn)性支持，從 75 版本開始默認(rèn)開啟。

瀏覽器支持該功能后，我們以前使用 JavaScript 實(shí)現(xiàn)的圖片懶加載功能，現(xiàn)在直接在 HTML 里面加個(gè)標(biāo)簽就可以實(shí)現(xiàn)圖片懶加載功能了。原生懶加載沒有使用 JavaScript，也就沒有額外的開銷，性能自然會(huì)好很多。

如果瀏覽器支持，開發(fā)者可以在 img 和 iframe 標(biāo)簽上添加一個(gè)額外的 loading 屬性來開啟和控制瀏覽器的懶加載行為。該屬性支持以下 3 個(gè)值：

• lazy：為這個(gè)元素開啟懶加載行為。
• eager：為這個(gè)元素禁用懶加載行為，也就是在渲染網(wǎng)頁的時(shí)候立即加載。
• auto：讓瀏覽器來決定是否使用延遲加載。當(dāng) loading 屬性設(shè)置為 auto 時(shí)，相當(dāng)于未設(shè)置該屬性。

Native Lazyload 原生懶加載插件

我們知道，WordPress 的很多圖片都是通過模版標(biāo)簽輸出的，要修改模版標(biāo)簽輸出的 HTML 來添加屬性，支持原生懶加載功能不是那么容易。Google 考慮到了這一點(diǎn)，為我們開發(fā)了 Native Lazyload 這個(gè)插件。

該插件可以自動(dòng)為圖片添加 loading 屬性來開啟瀏覽器原生懶加載功能。如果瀏覽器不支持loading屬性，插件會(huì)回退到基于 IntersectionObserver 的 JavaScript 解決方案。如果 JavaScript 被禁用，但是瀏覽器支持loading 屬性，插件將為圖片元素添加一個(gè) noscript 變體，圖片還是會(huì)包括加載屬性而無需進(jìn)一步更改。

目前僅有 Chrome 支持 loading 屬性，因?yàn)檫@個(gè)屬性可以為在廣泛的圖片懶加載需求提供更方便和更高性能的解決方案，相信其他瀏覽器也會(huì)很快支持這個(gè)屬性。另外我們也提供WordPress性能優(yōu)化服務(wù)，如有需要，請(qǐng)聯(lián)系我們咨詢。