??懶加載是一種在頁(yè)面加載時(shí)延遲加載一些非關(guān)鍵資源的技術(shù)吏颖，換句話(huà)說(shuō)就是按需加載。對(duì)于圖片來(lái)說(shuō)恨樟，非關(guān)鍵通常意味著離屏半醉。當(dāng)我們?cè)谑褂媚承﹫D片量比較大的網(wǎng)站時(shí)，如果向下滑動(dòng)的速度過(guò)快劝术，我們可以看到新出現(xiàn)在可視區(qū)域內(nèi)的圖片從占位圖變成實(shí)際圖片的過(guò)程缩多。
我們之前看到的懶加載一般是這樣的形式：
??1.瀏覽一個(gè)網(wǎng)頁(yè)，準(zhǔn)備往下拖動(dòng)滾動(dòng)條养晋，下方圖片為占位圖衬吆；
??2.快速向下拖動(dòng)，可以看到一個(gè)占位圖片出現(xiàn)在視窗绳泉；
??3.出現(xiàn)在視窗之后逊抡，占位圖片被瞬間替換成最終的圖片。
??如果你之前不了解懶加載秦忿，那么簡(jiǎn)單概括一下懶加載的優(yōu)勢(shì)：可以減少頁(yè)面加載的時(shí)間麦射、頁(yè)面的大小和降低系統(tǒng)資源的占用蛾娶，這些對(duì)于性能都有顯著地提升。
??這里對(duì)于懶加載的方式就不在一一贅述峻呛，網(wǎng)上很多文檔都有詳細(xì)的教程穆碎，并且還有很多的第三方插件實(shí)現(xiàn)所禀，但是免不了都要折騰一番褂策。
??而這里我們要介紹的是在2019年4月6日扬蕊，Chrome官方公布蒂培，在Chrome75的新版本中給前端開(kāi)發(fā)者帶來(lái)的福利：Chrome原生支持圖片懶加載抗悍。
在這篇文章中指蚁，我們可以看到使用方式很簡(jiǎn)單，就是給<img>標(biāo)簽增加loading屬性即可：
<img src="logo.jpg" loading="lazy" alt="..." />
loading屬性支持三個(gè)值：
-
lazy：懶加載绢涡； -
eager：不懶加載； -
auto：相當(dāng)于不設(shè)置 loading 屬性辨液。
??Chrome認(rèn)為：“當(dāng)用戶(hù)滾動(dòng)到附近時(shí)”的具體要做的事情應(yīng)該留給瀏覽器虐急。
??用戶(hù)可能更希望瀏覽器在要加載的圖片或資源在即將進(jìn)入視口之前，再進(jìn)行提取滔迈。這樣更有助于節(jié)省資源和提升用戶(hù)打開(kāi)多圖頁(yè)面的效率止吁。
網(wǎng)友評(píng)論：
歡迎留言參加討論...
