使用 loading 屬性實(shí)現(xiàn)瀏覽器級別的圖片懶加載

圖片懶加載是日常開發(fā)中的常見需求。我們在實(shí)現(xiàn)懶加載時(shí)大多數(shù)會(huì)使用一些現(xiàn)成的庫或者基于 Intersection Observer API 進(jìn)行處理

不過很多同學(xué)不知道的是：img 標(biāo)簽的 loading 屬性可以讓你在不編寫JavaScript代碼或使用第三方庫的情況下啟用瀏覽器級別的圖片懶加載。

看下面的源代碼：

以這種方式實(shí)現(xiàn)圖片懶加載的功能，當(dāng)頁面往下滾動(dòng)的時(shí)候，圖片動(dòng)態(tài)加載：