Web Design Laboratory
Lazy Loading是一種優化網頁效能的技術
減少初始載入的資源,讓網頁更快呈現給使用者。
只載入使用者實際看到的內容,減少不必要的數據傳輸。
減少白屏時間,提供更流暢的瀏覽體驗。
網頁上的圖片,尤其是較大的圖片,通常會使用懶載入。
嵌入的影片,直到使用者點擊播放按鈕才會開始載入。
一些第三方腳本,例如分析工具或廣告腳本,也可以延遲載入。
在無限捲動的網頁中,只有當使用者捲動到一定位置時,才會載入更多的內容。
HTML屬性:loading="lazy":直接在 img 標籤中添加此屬性,告訴瀏覽器延遲載入圖片。
JavaScript:Intersection Observer API: 監測元素是否進入視窗,當元素進入視窗時觸發載入。
第三方庫: 許多JavaScript庫提供了更方便的懶載入功能,例如LazyLoad、Lozad等。
<img src="large-image.jpg" alt="大圖" loading="lazy">