延遲載入 (Lazy Loading) 綜述
延遲載入是一種網頁最佳化技術，它的核心概念是延後載入那些目前不在使用者視窗內（即「離屏」）的非關鍵資源，例如圖片和 <iframe>。這些資源只會在使用者捲動到它們即將進入視窗範圍時才開始載入。這麼做能顯著提升網頁的初始載入速度、減少頻寬消耗，並全面改善網站效能與使用者體驗。
延遲載入的主要實作方式
瀏覽器原生支援
現代網頁瀏覽器（除了較舊版本的 IE 和 Safari）已經內建對圖片和 <iframe> 的延遲載入支援。只要在 <img> 或 <iframe> 標籤中加入 loading=”lazy” 屬性，瀏覽器就會自動延後載入這些離屏資源，直到它們接近視窗區域。載入的距離閾值可能會因使用者的網路連線類型而異。
Intersection Observer API
JavaScript API，它能更有效率地偵測元素何時進入或離開視窗（或另一個指定的元素）。開發者可以註冊一個回呼函式，當被監控的元素與根元素產生交集時就會觸發。這不僅免去了手動監聽捲動事件的麻煩，還能將監控任務從主執行緒中卸載，從而提高效能。它非常適合實作圖片延遲載入、無限捲動和其他依賴可見性的功能。
- 用原生的 JavaScript Intersection Observer API 實現 lazy loading (Medium)
- Intersection Observer API – Web APIs (pjchender.dev)
基於 JavaScript 的解決方案
原生支援和 Intersection Observer API 普及之前，延遲載入通常透過 JavaScript 監聽捲動事件並計算元素相對於視窗的位置來實作。儘管這種方法仍然可行，但其效能可能不如 Intersection Observer 或瀏覽器原生延遲載入。使用函式庫和框架也能簡化這類實作。
延遲載入的重要考量
- 預留空間 (Placeholders)： 為避免版面位移 (Cumulative Layout Shift – CLS) 並提供更流暢的使用者體驗，為延遲載入的內容預留空間至關重要。可以透過設定圖片尺寸，或使用低品質圖片佔位符 (LQIP) 或主要顏色佔位符來實現。
- 關鍵內容： 頁面初次載入時就立即顯示在視窗內的圖片或其他內容（例如：標題圖、Logo）通常不應延遲載入，以確保它們能即時呈現。
- CSS 背景圖片： 瀏覽器層級的延遲載入通常不適用於 CSS 背景圖片。這些需要客製化的 JavaScript 解決方案來實現延遲載入。
- 錯誤處理： 實作健全的錯誤處理機制，以便在圖片載入失敗時通知使用者，並提供替代內容或復原選項。
- 搜尋引擎優化 (SEO)： 對於由 JavaScript 驅動的延遲載入，請確保搜尋引擎爬蟲仍能存取圖片，例如透過提供 <noscript> 標籤。
- 測試： 在實際環境中，針對不同設備和網路速度進行全面測試至關重要，以確認延遲載入功能如預期運作並帶來預期的效能優勢。
lazy loading image 與 IntersectionObserver API 的概念參考
- 用原生的 JavaScript Intersection Observer API 實現 Lazy Loading
Intersection Observer API 實作圖片與資料長度延後載入在畫面外 - PJCHENder – [WebAPIs] Intersection Observer API
- 實作 圖片延遲載入（image lazy-load）、無限滾動（infinite scrolling）、視差滾動（parallax scrolling）概念
- 透過 Intersection Observer API 可以讓註冊一個 callback function，這個函式會在「每當一個被監控的元素進入／離開某個元素或 viewport 時」，或者「兩者相交達到的一定的次數時」觸發執行，如此，網頁不需要在主執行緒來監控這些元素。
- 第 12 屆 iThome 鐵人賽 – [Day 30] Tips for Lazy Loading Images
- 瀏覽器內建 Lazy Loading
- 準備 Placeholder (色塊在圖片還沒載入完成前更換方案)
- 處理不能執行 JavaScript 的情況 (noscript 元素放置 img src 圖片路徑)
- CSS background (瀏覽器原生還沒有，透過套件實作)
- ianccy – lazy loading image 延後載入畫面外圖片
- 實作方法 inline images (1. javascript 搭配 viewport 判斷圖片網址由 data-src 轉為加入 src 載入圖片 2. Intersection observer、event handler、原生 chrome 支援)
- Chrome 原生支援 ( <img loading='lazy' src='https://placekitten.com/400/400' width='400' height='400' alt=''> 的 loading='lazy')
- IntersectionObserver API setTimeout 500ms 實作 lazyload 灰階區塊
- seo 額外處理 (標明出 noscript 的 img html)
- web.dev – 網頁瀏覽器層級的延遲載入圖片
瀏覽器原生 loading="lazy" 標籤屬性實作 - 探索實驗室x馬克 – 網頁圖片延遲載入方法 (Lazy loading)
- 方法一：使用套件 (Lazy Load Remastered)
- 方法二：使用 Intersection Observer API
- 方法三：使用瀏覽器原生支援 ( loading="lazy")
vanilla-lazyload 套件：