據說你還在手寫懶加載?

過去, 咱們對含有大量圖片的網站進行優化無外乎要依靠JS邏輯或是相關插件來完成, 好比懶加載技術. 而如今(至少在不久的未來), Chrome 75版本將增長原生懶加載功能.

直接開始使用

固然, 你也能夠如今就開始體驗這一功能, 在瀏覽器的標籤欄輸入browser://flags/#enable-lazy-image-loading並進入頁面, 找到enable-lazy-image-loading這一項打開它, 重啓後便可使用.

標準之下

有關loading的使用, 我相信你想知道更多, 你可使用如下三個屬性來定義瀏覽器加載行爲:

• lazy: 使用懶加載, 當屏幕滾動到圖片附近時
• eager: 當即加載圖片
• auto: 由瀏覽器自行決定

有關懶加載的討論, 你能夠經過這個issue進一步探索.

開始使用新代碼

也許你想把這一特徵當即運用到你的項目中, 可是你別忘了至少目前爲止他仍是實驗性的功能, 因此須要作功能檢測, 對不支持的瀏覽器進行兼容:

僅僅這樣還不夠, 爲了避免使你的Image標籤被不支持loading屬性的瀏覽器當即加載出來, 你還須要把src屬性替換爲其它屬性, 同時還得考慮瀏覽器不支持JS的狀況, 好比像這樣作:

拋棄非原生懶加載?

拋棄非原生懶加載? 答案在任何狀況下都是否.

若是將來瀏覽器都支持懶加載, 而且標準較如今沒有改變的話, 它只適用於一些簡單的網頁瀏覽場景, 好比像掘金這種文本和圖片混排的頁面.對於特殊場景下, 好比這位老哥的這篇文章裏描繪的問題, 咱們仍是得須要根據需求, 書寫大量原生JS邏輯.除非問題本質獲得解決, 否者任何在體驗上的優化, 都是優化一部分場景的性能, 而放棄另外一部分場景的性能(甚至負優化)

最後

文中代碼圖片是使用Carbon合成的, 掘金的代碼高亮實在是... 麼得辦法~~

References

Native image lazy-loading for the web!

Lazyload images and iframes

圖片和視頻的懶加載

極致性能 – 圖片漸進顯示和懶加載