圖片懶加載

圖片往往是影響網頁載入速度的主要因素之一。本文整理七種圖片懶加載技術，比較各自的相容性與效能取捨，方便依場景選用。 什麼是圖片懶加載？圖片懶加載是一種網頁優化技術，延遲載入暫時不可見的圖片。只有當使用者滾動到圖片位置時，圖片才會開始載入，可以顯著減少初始頁面載入時間和頻寬使用。 七種圖片懶加載方法1. 原生懶加載HTML Living Standard 定義的 loading 屬性是最簡單的懶加載方式： 1<img src="image.jpg" loading="lazy" alt="懶加載圖片"> 支援度：Chrome 77+、Firefox 75+、Safari 16.4+，全球覆蓋率約 95%。不支援的舊版瀏覽器會忽略此屬性，圖片照常載入，無需額外後備處理。 優點： 零程式碼，無需 JavaScript 瀏覽器原生支援，效能佳 缺點： Safari 16.4 以下（含 iOS 16.4 以下）不支援 2. Intersection Observer API這是一個強大的 JavaScript...