??懶加載是一種在頁面加載時延遲加載一些非關(guān)鍵資源的技術(shù)，換句話說就是按需加載。對于圖片來說，非關(guān)鍵通常意味著離屏。當(dāng)我們在使用某些圖片量比較大的網(wǎng)站時，如果向下滑動的速度過快，我們可以看到新出現(xiàn)在可視區(qū)域內(nèi)的圖片從占位圖變成實際圖片的過程。
我們之前看到的懶加載一般是這樣的形式：
??1.瀏覽一個網(wǎng)頁，準(zhǔn)備往下拖動滾動條，下方圖片為占位圖；
??2.快速向下拖動，可以看到一個占位圖片出現(xiàn)在視窗；
??3.出現(xiàn)在視窗之后，占位圖片被瞬間替換成最終的圖片。

??如果你之前不了解懶加載，那么簡單概括一下懶加載的優(yōu)勢：可以減少頁面加載的時間、頁面的大小和降低系統(tǒng)資源的占用，這些對于性能都有顯著地提升。

??這里對于懶加載的方式就不在一一贅述，網(wǎng)上很多文檔都有詳細(xì)的教程，并且還有很多的第三方插件實現(xiàn)，但是免不了都要折騰一番。

??而這里我們要介紹的是在2019年4月6日，Chrome官方公布，在Chrome75的新版本中給前端開發(fā)者帶來的福利：Chrome原生支持圖片懶加載。

在這篇文章中，我們可以看到使用方式很簡單，就是給<img>標(biāo)簽增加loading屬性即可：

<img src="logo.jpg" loading="lazy" alt="..." />

loading屬性支持三個值：

• lazy：懶加載；
• eager：不懶加載；
• auto：相當(dāng)于不設(shè)置 loading 屬性。

??Chrome認(rèn)為：“當(dāng)用戶滾動到附近時”的具體要做的事情應(yīng)該留給瀏覽器。

??用戶可能更希望瀏覽器在要加載的圖片或資源在即將進(jìn)入視口之前，再進(jìn)行提取。這樣更有助于節(jié)省資源和提升用戶打開多圖頁面的效率。

網(wǎng)友評論：

歡迎留言參加討論...