【前端效能優化】圖片懶加載 Lazy Load

轉職前端遇到的1000個問題效能優化

7514 2021-12-14 23:59:20 ‧ 3254 瀏覽

圖片緩載入是為了避免第一次進到網頁載入大量圖片，造成網頁載入速度太慢，因此非第一個畫面看到的圖片，可以等到需要時再依序載入畫面。

<img data-src="img/picture.png" src="">

2.監測 image 元素。
3.捲軸滾到圖片時將網址到 src 路徑裡，再取消監測。

<img data-src="img/picture.png" src="img/picture.png">

元素要加入寬度，這樣瀏覽器才能取得圖片，否則寬度為０的時候，就會在一開始全部載入。

<img src='img/picture.png' style="width:100%" loading='lazy'/>

各個瀏覽器支援版本

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

立即登入留言

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

IT邦幫忙