延遲載入最佳做法

Jeremy Wagner
Rachel Andrew

雖然延遲載入圖片和影片成效良好，且可衡量成效 我並不需要親身體驗，如果出錯 或非預期的結果因此，請務必注意以下幾點 幾個實用問題

大膽嘗試

在網頁上的每個媒體資源都經過延遲載入 但您需要抵禦這種嘗試。高於 摺疊應該不會延遲載入。這類資源應視為 資產，因此應正常載入。

延遲載入會延遲載入資源，直到 DOM 互動後 指令碼載入並開始執行時。如為 摺疊時也沒關係，但位於不需捲動位置的重要資源應使用 標準 <img> 元素會盡快顯示。

當然，現在不需捲動就能看到的網站 廣告可以在各種大小的螢幕上呈現筆電上摺疊位置看得見的內容 在行動裝置上顯示在下方。關於這點，我們未提供任何項目符號建議 並在各種情況下以最佳方式解決您需要 您網頁中重要資產的目錄，並以一般形式載入這些圖片 。

此外，我們也不要嚴格限制摺疊線 觸發延遲載入的門檻可能更適合您的需求 在需捲動位置設立一段距離，讓圖片開始 能在使用者捲動至可視區域前順利載入。舉例來說， Intersection Observer API 可讓你在rootMargin 選項物件。IntersectionObserver這個 可以有效為元素提供緩衝區，這個緩衝區會事先觸發延遲載入行為 元素位於可視區域中：

let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
  // lazy-loading image code goes here
}, {
  rootMargin: "0px 0px 256px 0px"
});

如果 rootMargin 的值與您為 CSS 指定的值相似 margin 屬性，因為沒錯！在此情況下， 觀察到的元素下邊界 (預設為瀏覽器可視區域， 這可以透過 root 屬性變更為特定元素)，擴大 256 像素。這表示當圖片元素 系統將開始載入圖片。 會在使用者實際看到之前先行顯示

如要在不支援 Intersection Observe 的瀏覽器上達成相同效果，請使用捲動事件處理程式碼，並調整 getBoundingClientRect 檢查以包含緩衝區。

版面配置位移和預留位置

如未使用預留位置，延遲載入媒體可能會導致版面配置中位移。 這些變更可能會對使用者造成困擾，並會觸發成本高昂的 DOM 版面配置 會耗用系統資源並導致卡頓的作業。或至少 建議使用單色的純色預留位置，大小會與 目標圖片，或使用以下技術 LQIP 或 指出媒體內容內容的 SQIP 再載入。

如果是 <img> 標記，src 一開始應指向預留位置，直到達到該預留位置為止 屬性更新為最終圖片網址。在poster <video> 元素指向預留位置圖片。此外，請使用 width 和 <img> 和 <video> 標記的 height 屬性。這可以確保 從預留位置轉換為最終圖片不會改變算繪後的大小 做為媒體載入之用

圖片解碼延遲

在 JavaScript 中載入大型圖片並放入 DOM 後， 導致使用者介面在短時間內沒有回應 發生時間。使用 decode，以非同步方式解碼圖片 方法 再加以插入 DOM 之前，就可能會減少這類卡頓情形，不過 請注意，這項功能目前只在部分國家/地區推出，而且會讓延遲載入邏輯變得更加複雜。 如要使用，請先進行檢查。以下節目 將 Image.decode() 與備用搭配使用的方式：

var newImage = new Image();
newImage.src = "my-awesome-image.jpg";

if ("decode" in newImage) {
  // Fancy decoding logic
  newImage.decode().then(function() {
    imageContainer.appendChild(newImage);
  });
} else {
  // Regular image load
  imageContainer.appendChild(newImage);
}

填寫這個 CodePen 連結即可查看 實際運作情況與這個範例類似如果大多數的圖片都很小 這可能不適合您，但一定有助於減少卡頓。 延遲載入大型圖片，然後插入 DOM。

無法載入檔案時

有時媒體資源載入的原因可能是某個原因或其他因素而無法載入 。請問是什麼時候？視情況而定，以下為假設情境 使用者造訪網站，或使用者只開啟過時的分頁 才能讀取你的內容 在這個過程中的某個時間點，系統會重新部署。在部署期間 圖片資源的名稱因雜湊式版本管理而變更，或已移除 以致於可能必須趕在最後一刻 大幅更動專案，甚至將專案全部取消當使用者延遲載入圖片時 因而失敗

雖然這種狀況相對罕見，但您可能得有備份 預測延遲載入失敗的情況對圖片來說，這類解決方案 ：

var newImage = new Image();
newImage.src = "my-awesome-image.jpg";

newImage.onerror = function(){
  // Decide what to do on error
};
newImage.onload = function(){
  // Load the image
};

如果發生錯誤，您應該怎麼做，視您的應用程式而定。適用對象 例如，您可以將圖片預留位置區域換成 使用者嘗試再次載入圖片，或只顯示錯誤訊息 圖片預留位置區域

也可能會發生其他情況。無論你想做什麼，都沒辦法清楚 在發生錯誤時通知使用者，並可能提供動作 採取行動

JavaScript 可用性

請勿假設 JavaScript 隨時可用。如果您要 延遲載入圖片，考慮提供 <noscript> 標記，以在 無法使用案例 JavaScript最簡單的備用範例 在 JavaScript 關閉的情況下，使用 <noscript> 元素提供圖片：

我是圖片！

如果關閉 JavaScript，使用者就會同時看到預留位置圖片和 <noscript> 元素所包含的圖片。如要避開這個區域，請放置 <html> 標記上的 no-js 類別，如下所示：

<html class="no-js">

接著，將一行內嵌指令碼放在 <head> 中，置於任何樣式表前 是透過 <link> 標記提出要求，該標記會從 <html> 移除 no-js 類別 元素：

<script>document.documentElement.classList.remove("no-js");</script>

最後，在發生下列情況時，使用某些 CSS 隱藏含有延遲類別的元素 JavaScript 無法使用：

.no-js .lazy {
  display: none;
}

這不會導致系統無法載入預留位置圖片，但結果會增加 極其實用關閉 JavaScript 的使用者只會取得預留位置 比起預留位置，也沒有有意義的圖像內容 全部。