5種懶惰加載圖像以提高網站性能的技術

現代網頁應用中，圖片已成為最常用的內容類型之一。雖然使用背景圖片可以提升應用的視覺效果，但圖片尺寸過大卻會嚴重影響應用性能。

即使經過優化，圖片仍然可能佔用大量空間，導致用戶等待時間過長。如果用戶沒有獲得快速訪問內容的體驗，他們往往會失去耐心並轉向其他網站，因此，高效的圖片加載方案至關重要。

本文將介紹五種圖片懶加載方法，幫助您優化網站，提升用戶體驗。這些方法適用於各種類型的圖片，包括背景圖片、內聯圖片和橫幅圖片。

關鍵要點

• 圖片懶加載通過異步加載圖片來提升網站性能，只有在頁面可見內容完全加載後，或圖片出現在瀏覽器視窗中時才加載。這對於使用移動設備和慢速網絡的用戶來說尤其重要。
• 原生懶加載是一種使用HTML的簡單方法，幾乎沒有額外開銷，但並非所有瀏覽器都支持此功能。 Intersection Observer API是另一種易於實現且有效的方法，但同樣並非所有瀏覽器都支持。
• Lozad.js和Yall.js等JavaScript庫可以快速輕鬆地實現圖片、視頻和iframe等的懶加載。它們使用Intersection Observer API，但需要考慮瀏覽器兼容性。
• 類似Medium網站的做法，在懶加載高分辨率圖片的同時，先顯示模糊的低分辨率圖片，可以獲得不錯的視覺效果。這可以通過多種方式實現，例如Craig Buckler提出的高性能方法，該方法還支持視網膜屏幕。

什麼是懶加載？

圖片懶加載意味著異步加載網站上的圖片。可以在頁面可見內容完全加載後，或僅當圖片出現在瀏覽器視窗中時，按需加載內容。這意味著如果用戶沒有向下滾動到底部，頁面底部的圖片甚至不會被加載，從而最終提高應用程序性能。

對於大多數網站來說，了解如何在HTML中啟用懶加載至關重要。例如，嘗試瀏覽您最喜歡的包含高清照片的網站，您很快就會發現網站只加載了有限數量的圖片。當您向下滾動頁面時，佔位符圖片會迅速被實際圖片替換。

例如，請注意Unsplash.com上的加載器：將頁面該部分滾動到視圖中會觸髮用全分辨率照片替換佔位符：

Unsplash.com上的懶加載示例

為什麼要實現圖片懶加載？

了解如何懶加載圖片對於優化網頁性能至關重要，尤其是在包含大量視覺內容的頁面上。以下是一些應該考慮為您的網站懶加載圖片的理由：

1. 提升DOM加載時間

• 如果您的網站使用JavaScript來顯示內容或為用戶提供某種功能，則快速加載DOM至關重要。腳本通常會在DOM完全加載後才開始運行。在一個包含大量圖片的網站上，懶加載（或異步加載圖片）可能決定著用戶是繼續瀏覽還是離開您的網站。

2. 節省帶寬

• 由於大多數懶加載解決方案只在用戶滾動到圖片在視窗中可見的位置時才加載圖片，因此如果用戶從未到達該位置，這些圖片將永遠不會被加載。這意味著可以節省大量的帶寬，這對於大多數用戶（尤其是使用移動設備和慢速網絡的用戶）來說都是非常有益的。

懶加載圖片有助於提高網站性能，但最好的方法是什麼呢？

沒有完美的方法。

如果您精通JavaScript，那麼實現您自己的懶加載解決方案應該不成問題。沒有什麼比自己編寫代碼更能賦予您控制權了。

或者，您可以瀏覽網絡以尋找可行的方法，或加入討論論壇並分享想法。我做了同樣的事情，並發現了這五種有趣的方法。

1. 原生懶加載

當用戶滾動網頁時，圖片和iframe的原生懶加載是一種直接加載內容的方法。您只需要將loading="lazy"屬性添加到您的圖片和iframe即可。

<code class="language-html"><img src="https://img.php.cn/upload/article/000/000/000/173897821515260.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance ">
<iframe loading="lazy" src="content.html"></iframe></code>

如您所見，不需要JavaScript，也不需要動態替換src屬性的值，只需使用普通的HTML即可。此方法是無需任何額外開銷地在HTML中添加懶加載的完美示例。

“loading”屬性使我們可以延遲加載屏幕外的圖片和iframe，直到用戶滾動到頁面上的相應位置。 “loading”可以取以下三個值中的任何一個：

• lazy：非常適合懶加載
• eager：指示瀏覽器立即加載指定內容
• auto：將是否懶加載的選項留給瀏覽器。

此方法無可匹敵：它幾乎沒有額外開銷，並且是乾淨簡單的在HTML中懶加載圖片的方法。但是，儘管大多數主流瀏覽器都很好地支持“loading”屬性，但在撰寫本文時，一些瀏覽器仍然缺乏完全的支持。

有關此HTML懶加載圖片的強大功能（包括瀏覽器支持變通方法）的深入文章，請不要錯過Addy Osmani的“Native image lazy-loading for the web!”。

2. 使用Intersection Observer API進行懶加載

Intersection Observer API是一個現代接口，您可以利用它來懶加載圖片和其他內容。

以下是MDN對該API的介紹：

Intersection Observer API提供了一種異步觀察目標元素與祖先元素或頂級文檔視窗相交變化的方法。

換句話說，Intersection Observer API異步地監視一個元素與另一個元素的相交情況。

Denys Mishunov撰寫了一篇關於Intersection Observer和使用它懶加載圖片的優秀教程。以下是他的解決方案：

假設您想懶加載一個圖片庫。每個圖片的標記如下所示：

<code class="language-html"><img src="https://img.php.cn/upload/article/000/000/000/173897821515260.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance ">
<iframe loading="lazy" src="content.html"></iframe></code>

在這裡，圖片的路徑包含在data-src屬性中，而不是src屬性中。原因是使用src意味著圖片會立即加載，這不是您想要的。

在CSS中，您可以為每個圖片指定一個min-height值，例如100px。這會給每個圖片佔位符（沒有src屬性的img元素）一個垂直尺寸：

<code class="language-html"><img src="https://img.php.cn/upload/article/000/000/000/173897821665537.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance "></code>

然後，在JavaScript文檔中，您需要創建一個配置對象並使用intersectionObserver實例註冊它：

<code class="language-css">img {
  min-height: 100px;
  /* more styles here */
}</code>

最後，您可以迭代所有圖片並將它們添加到此iterationObserver實例中：

<code class="language-javascript">// 创建配置对象：rootMargin和threshold是接口公开的两个属性
const config = {
  rootMargin: '0px 0px 50px 0px',
  threshold: 0
};

// 使用intersectionObserver实例注册配置对象
let observer = new IntersectionObserver(function(entries, self) {
  // 迭代每个条目
  entries.forEach(entry => {
    // 只处理相交的图片。isIntersecting是接口公开的属性
    if(entry.isIntersecting) {
      // 将图片路径从data-src复制到src的自定义函数
      preloadImage(entry.target);
      // 图片现在已就位，停止观察
      self.unobserve(entry.target);
    }
  });
}, config);</code>

此解決方案的優點是易於實現、有效且具有相交性。 Observer承擔了計算方面的大部分工作。

在瀏覽器支持方面，除了IE 11和Opera Mini之外，所有主流瀏覽器在其最新版本中都支持Intersection Observer API。

您可以在Denys的文章中了解有關Intersection Observer API和此實現細節的更多信息。

3. Lozad.js

lozad.js 懶加載JavaScript庫

實現圖片懶加載的快速簡便的替代方法是讓JS庫為您完成大部分工作。

Lozad.js是一個高性能、輕量級且可配置的懶加載器，它使用純JavaScript，沒有任何依賴項。它是用戶滾動時懶加載JavaScript、圖片、視頻和iframe的優秀工具。

您可以使用npm/Yarn安裝Lozad，並使用您選擇的模塊打包器導入它：

<code class="language-javascript">const imgs = document.querySelectorAll('[data-src]');
imgs.forEach(img => {
  observer.observe(img);
});</code>

<code class="language-bash">npm install --save lozad

yarn add lozad</code>

或者，您可以簡單地使用CDN下載庫，並將其添加到HTML頁面底部的

lozad接下來，對於基本實現，請將類

添加到標記中的資源中：

<code class="language-javascript">import lozad from 'lozad';</code>

最後，在您的JS文檔中實例化Lozad：

<code class="language-html"><img src="https://img.php.cn/upload/article/000/000/000/173897821885662.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance "></code>

您可以在Lozad GitHub存儲庫中找到使用該庫的所有詳細信息。

如果您不想了解Intersection Observer API，或者您只是在尋找適用於各種內容類型的快速實現，那麼Lozad是一個不錯的選擇。

4. 帶模糊圖片效果的懶加載

• 如何使用 CSS 可靠地隱藏 `` 選單中的 `` 元素？
• 如何僅使用一個 HTML 元素和 CSS 來建立一個細長的六角形按鈕？
• 純CSS定製文字省略的方法大全
• CSS如何實現Tab頁切換的程式碼分享
• CSS實戰項目中書寫規範與順序