五種延遲加載圖像以提高網(wǎng)站性能的方法

時間：2024-05-16 15:30:01 | 來源：建站知識

時間：2024-05-16 15:30:01 來源：建站知識

由于圖像是網(wǎng)絡(luò)上最受歡迎的內(nèi)容類型之一，網(wǎng)站上的頁面加載時間很容易成為一個問題。

即使經(jīng)過適當優(yōu)化，圖像的重量也會相當大。這可能會對訪問者在訪問您網(wǎng)站上的內(nèi)容之前必須等待的時間產(chǎn)生負面影響。很有可能，他們會變得不耐煩并在其他地方導(dǎo)航，除非您想出一個不影響速度感知的圖像加載解決方案。

在本文中，您將了解五種延遲加載圖像的方法，您可以將這些方法添加到您的Web優(yōu)化工具包中，以改善您網(wǎng)站上的用戶體驗。

什么是延遲加載？

延遲加載圖片意味著在網(wǎng)站上異步加載圖片——也就是說，在首屏內(nèi)容完全加載之后，或者甚至有條件地，只有當它們出現(xiàn)在瀏覽器的視口中時。這意味著如果用戶不一直向下滾動，放置在頁面底部的圖像甚至不會被加載。

許多網(wǎng)站都使用這種方法，但在圖片較多的網(wǎng)站上尤為明顯。嘗試瀏覽您最喜歡的在線獵場以獲取高分辨率照片，您很快就會意識到該網(wǎng)站如何只加載有限數(shù)量的圖像。當您向下滾動頁面時，您會看到占位符圖像快速填充真實圖像以供預(yù)覽。例如，注意Unsplash.com上的加載器：將頁面的該部分滾動到視圖中會觸發(fā)用全分辨率照片替換占位符：



為什么要關(guān)心延遲加載圖像？

您應(yīng)該考慮為您的網(wǎng)站延遲加載圖像至少有幾個很好的理由：

• 如果您的網(wǎng)站使用JavaScript來顯示內(nèi)容或向用戶提供某種功能，那么快速加載 DOM 就變得至關(guān)重要。腳本通常要等到 DOM 完全加載后才開始運行。在擁有大量圖像的網(wǎng)站上，延遲加載（或異步加載圖像）可能會影響用戶停留或離開您的網(wǎng)站。
• 由于大多數(shù)延遲加載解決方案僅在用戶滾動到圖像在視口內(nèi)可見的位置時才加載圖像，因此如果用戶從未到達該點，則永遠不會加載這些圖像。這意味著帶寬的大量節(jié)省，大多數(shù)用戶，尤其是那些使用移動設(shè)備和慢速連接訪問Web的用戶，都會感謝您。

好吧，延遲加載圖像有助于提高網(wǎng)站性能，但最好的方法是什么？

沒有完美的方法。

如果您熟悉JavaScript，那么實現(xiàn)您自己的延遲加載解決方案應(yīng)該不是問題。沒有什么比自己編寫代碼更能控制你的了。

或者，您可以瀏覽Web以尋找可行的方法并開始試驗它們。我就是這樣做的，并遇到了這五種有趣的技術(shù)。

#1 原生延遲加載

圖像和iframe的原生延遲加載非常酷。沒有什么比下面的標記更直接了：

<img src="myimage.jpg" loading="lazy" alt="..." /> <iframe src="content.html" loading="lazy"></iframe>

如您所見，沒有 JavaScript，沒有動態(tài)交換src屬性值，只是普通的舊 HTML。

該loading屬性為我們提供了延遲屏幕外圖像和iframe的選項，直到用戶滾動到他們在頁面上的位置。loading可以采用以下三個值中的任何一個：

• lazy: 非常適合延遲加載
• eager: 指示瀏覽器立即加載指定的內(nèi)容
• auto：保留延遲加載或不延遲加載到瀏覽器的選項。

這種方法沒有競爭對手：它的開銷為零，干凈簡單。然而，盡管在撰寫本文時，大多數(shù)主要瀏覽器都對loading屬性有很好的支持，但并非所有瀏覽器都支持。

有關(guān)延遲加載圖像的這項出色功能（包括瀏覽器支持變通方法）的深入文章，請不要錯過 Addy Osmani 的“網(wǎng)絡(luò)原生圖像延遲加載”！。

#2 使用 Intersection Observer API 延遲加載

Intersection Observer API 是一個現(xiàn)代化的界面，你可以利用的延遲加載圖片和其他內(nèi)容。Intersection Observer API 提供了一種異步觀察目標元素與祖先元素或頂級文檔視口的交集變化的方法。

換句話說，被異步觀察的是一個元素與另一個元素的交集。

Denys Mishunov 有一個關(guān)于 Intersection Observer 和使用它的延遲加載圖像的很棒的教程。這是他的解決方案的樣子。

假設(shè)您想延遲加載圖片庫。每個圖像的標記如下所示：

<img data-src="image.jpg" alt="test image">

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

在 CSS 中，您為每個圖像賦予一個min-height值，例如100px. 這為每個圖像占位符（沒有 src 屬性的 img 元素）提供了一個垂直維度：

img { min-height: 100px; /* more styles here */ }

然后在JavaScript文檔中創(chuàng)建一個config對象并將其注冊到一個intersectionObserver實例中：

// create config object: rootMargin and threshold // are two properties exposed by the interface const config = { rootMargin: '0px 0px 50px 0px', threshold: 0 }; // register the config object with an instance // of intersectionObserver let observer = new intersectionObserver(function(entries, self) { // iterate over each entry entries.forEach(entry => { // process just the images that are intersecting. // isIntersecting is a property exposed by the interface if(entry.isIntersecting) { // custom function that copies the path to the img // from data-src to src ploadImage(entry.target); // the image is now in place, stop watching self.unobserve(entry.target); } }); }, config);

最后，您遍歷所有圖像并將它們添加到此iterationObserver實例中：

const imgs = document.querySelectorAll('[data-src]'); imgs.forEach(img => { observer.observe(img); });

該解決方案的優(yōu)點：實施起來輕而易舉，有效，并且可以在intersectionObserver計算方面進行繁重的工作。

另一方面，盡管最新版本的大多數(shù)瀏覽器都支持 Intersection Observer API，但并非所有瀏覽器都一致支持。幸運的是，有一個polyfill可用。

#3 Lozad.js

實現(xiàn)圖像延遲加載的一種快速簡便的替代方法是讓 JS 庫為您完成大部分工作。

Lozad 是一個高性能、輕量級和可配置的純JavaScript惰性加載器，沒有依賴項。您可以使用它來延遲加載圖像、視頻、iframe 等，并且它使用 Intersection Observer API。

你可以在 npm/Yarn 中包含 Lozad 并使用你選擇的模塊打包器導(dǎo)入它：

npm install --save lozad yarn add lozad

import lozad from 'lozad';

或者，您可以簡單地使用 CDN 下載庫并將其添加到 HTML 頁面底部的< script>標簽中：

<script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"> </script>

接下來，對于基本實現(xiàn)，將類lozad添加到標記中的資產(chǎn)：

<img class="lozad" data-src="img.jpg">

最后，在你的 JS 文檔中實例化 Lozad：

const observer = lozad(); observer.observe();

您將在Lozad GitHub 存儲庫上找到有關(guān)如何使用該庫的所有詳細信息。

如果您不想深入研究 Intersection Observer API 的工作原理，或者您只是在尋找適用于各種內(nèi)容類型的快速實現(xiàn)，那么 Lozad 是一個不錯的選擇。

只是，請注意瀏覽器支持，并最終將此庫與 Intersection Observer API 的 polyfill 集成。

#4 圖像模糊效果的延遲加載

如果您是Medium讀者，您肯定已經(jīng)注意到該網(wǎng)站如何在帖子中加載主圖片。

您首先看到的是圖像的模糊、低分辨率副本，而其高分辨率版本正在延遲加載。

您可以通過多種方式延遲加載具有這種有趣模糊效果的圖像。

我們最喜歡的技術(shù)是 Craig Buckler。這是此解決方案的所有優(yōu)點：

• 性能：只有 463 字節(jié)的 CSS 和 1,007 字節(jié)的縮小JavaScript代碼
• 支持視網(wǎng)膜屏幕
• 無依賴：不需要 jQuery 或其他庫和框架
• 逐步增強以抵消舊瀏覽器和失敗的 JavaScript

#5 Yall.js

Yall 是一個功能豐富的延遲加載腳本，用于圖像、視頻和 iframe。更具體地說，它使用 Intersection Observer API，并在必要時巧妙地使用傳統(tǒng)的事件處理程序技術(shù)。

在您的文檔中包含 Yall 時，您需要按如下方式對其進行初始化：

<script src="yall.min.js"></script> <script> document.addEventListener("DOMContentLoaded", yall); </script>

接下來，要延遲加載一個簡單的img元素，您只需在標記中執(zhí)行以下操作：

<img class="lazy" src="placeholder.jpg" data-src="image-to-lazy-load.jpg" alt="Alternative text to describe image.">

請注意以下事項：

• 您將類添加到元素
• src值是一個占位符圖像
• 要延遲加載的圖像的路徑在data-src屬性內(nèi)

Yall 的好處包括：

• Intersection Observer API 的出色性能
• 出色的瀏覽器支持（它可以追溯到 IE11）
• 不需要其他依賴項

結(jié)論

你有五種延遲加載圖像的方法，您可以開始在您的項目中進行試驗和測試。