由于圖像是網絡上最受歡迎的内容類型之一(yī)，網站上的頁面加載時間很容易成爲一(yī)個問題。
即使經過适當優化，圖像的重量也會相當大(dà)。這可能會對訪問者在訪問您網站上的内容之前必須等待的時間産生(shēng)負面影響。很有可能，他們會變得不耐煩并在其他地方導航，除非您想出一(yī)個不影響速度感知(zhī)的圖像加載解決方案。
在本文中(zhōng)，您将了解五種延遲加載圖像的方法，您可以将這些方法添加到您的Web優化工(gōng)具包中(zhōng)，以改善您網站上的用戶體(tǐ)驗。
什麽是延遲加載？
延遲加載圖片意味着在網站上異步加載圖片——也就是說，在首屏内容完全加載之後，或者甚至有條件地，隻有當它們出現在浏覽器的視口中(zhōng)時。這意味着如果用戶不一(yī)直向下(xià)滾動，放(fàng)置在頁面底部的圖像甚至不會被加載。
許多網站都使用這種方法，但在圖片較多的網站上尤爲明顯。嘗試浏覽您最喜歡的在線獵場以獲取高分(fēn)辨率照片，您很快就會意識到該網站如何隻加載有限數量的圖像。當您向下(xià)滾動頁面時，您會看到占位符圖像快速填充真實圖像以供預覽。例如，注意Unsplash.com上的加載器：将頁面的該部分(fēn)滾動到視圖中(zhōng)會觸發用全分(fēn)辨率照片替換占位符：
爲什麽要關心延遲加載圖像？
您應該考慮爲您的網站延遲加載圖像至少有幾個很好的理由：
如果您的網站使用JavaScript來顯示内容或向用戶提供某種功能，那麽快速加載 DOM 就變得至關重要。腳本通常要等到 DOM 完全加載後才開(kāi)始運行。在擁有大(dà)量圖像的網站上，延遲加載（或異步加載圖像）可能會影響用戶停留或離(lí)開(kāi)您的網站。
由于大(dà)多數延遲加載解決方案僅在用戶滾動到圖像在視口内可見的位置時才加載圖像，因此如果用戶從未到達該點，則永遠不會加載這些圖像。這意味着帶寬的大(dà)量節省，大(dà)多數用戶，尤其是那些使用移動設備和慢(màn)速連接訪問Web的用戶，都會感謝您。
好吧，延遲加載圖像有助于提高網站性能，但最好的方法是什麽？
沒有完美的方法。
如果您熟悉JavaScript，那麽實現您自己的延遲加載解決方案應該不是問題。沒有什麽比自己編寫代碼更能控制你的了。
或者，您可以浏覽Web以尋找可行的方法并開(kāi)始試驗它們。我(wǒ)(wǒ)就是這樣做的，并遇到了這五種有趣的技術。
#1 原生(shēng)延遲加載
圖像和iframe的原生(shēng)延遲加載非常酷。沒有什麽比下(xià)面的标記更直接了：
<img src="myimage.jpg" loading="lazy" alt="..." /> <iframe src="content.html" loading="lazy"></iframe>
如您所見，沒有 JavaScript，沒有動态交換src屬性值，隻是普通的舊(jiù) HTML。
該loading屬性爲我(wǒ)(wǒ)們提供了延遲屏幕外(wài)圖像和iframe的選項，直到用戶滾動到他們在頁面上的位置。loading可以采用以下(xià)三個值中(zhōng)的任何一(yī)個：
lazy: 非常适合延遲加載
eager: 指示浏覽器立即加載指定的内容
auto：保留延遲加載或不延遲加載到浏覽器的選項。
這種方法沒有競争對手：它的開(kāi)銷爲零，幹淨簡單。然而，盡管在撰寫本文時，大(dà)多數主要浏覽器都對loading屬性有很好的支持，但并非所有浏覽器都支持。
有關延遲加載圖像的這項出色功能（包括浏覽器支持變通方法）的深入文章，請不要錯過 Addy Osmani 的“網絡原生(shēng)圖像延遲加載”！。
#2 使用 Intersection Observer API 延遲加載
Intersection Observer API 是一(yī)個現代化的界面，你可以利用的延遲加載圖片和其他内容。Intersection Observer API 提供了一(yī)種異步觀察目标元素與祖先元素或頂級文檔視口的交集變化的方法。
換句話(huà)說，被異步觀察的是一(yī)個元素與另一(yī)個元素的交集。
Denys Mishunov 有一(yī)個關于 Intersection Observer 和使用它的延遲加載圖像的很棒的教程。這是他的解決方案的樣子。
假設您想延遲加載圖片庫。每個圖像的标記如下(xià)所示：
<img data-src="image.jpg" alt="test image">
請注意圖像的路徑如何包含在data-src屬性中(zhōng)，而不是src屬性中(zhōng)。原因是使用src意味着圖像會立即加載，這不是您想要的。
在 CSS 中(zhōng)，您爲每個圖像賦予一(yī)個min-height值，例如100px. 這爲每個圖像占位符（沒有 src 屬性的 img 元素）提供了一(yī)個垂直維度：
img { min-height: 100px; /* more styles here */ }
然後在JavaScript文檔中(zhōng)創建一(yī)個config對象并将其注冊到一(yī)個intersectionObserver實例中(zhōng)：
// 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實例中(zhōng)：
const imgs = document.querySelectorAll('[data-src]'); imgs.forEach(img => { observer.observe(img); });
該解決方案的優點：實施起來輕而易舉，有效，并且可以在intersectionObserver計算方面進行繁重的工(gōng)作。
另一(yī)方面，盡管最新版本的大(dà)多數浏覽器都支持 Intersection Observer API，但并非所有浏覽器都一(yī)緻支持。幸運的是，有一(yī)個polyfill可用。
#3 Lozad.js
實現圖像延遲加載的一(yī)種快速簡便的替代方法是讓 JS 庫爲您完成大(dà)部分(fēn)工(gōng)作。
Lozad 是一(yī)個高性能、輕量級和可配置的純JavaScript惰性加載器，沒有依賴項。您可以使用它來延遲加載圖像、視頻(pín)、iframe 等，并且它使用 Intersection Observer API。
你可以在 npm/Yarn 中(zhōng)包含 Lozad 并使用你選擇的模塊打包器導入它：
npm install --save lozad yarn add lozad
import lozad from 'lozad';
或者，您可以簡單地使用 CDN 下(xià)載庫并将其添加到 HTML 頁面底部的< script>标簽中(zhōng)：
<script src="static/js/lozad.min.js"> </script>
接下(xià)來，對于基本實現，将類lozad添加到标記中(zhōng)的資(zī)産：
<img class="lozad" data-src="img.jpg">
最後，在你的 JS 文檔中(zhōng)實例化 Lozad：
const observer = lozad(); observer.observe();
您将在Lozad GitHub 存儲庫上找到有關如何使用該庫的所有詳細信息。
如果您不想深入研究 Intersection Observer API 的工(gōng)作原理，或者您隻是在尋找适用于各種内容類型的快速實現，那麽 Lozad 是一(yī)個不錯的選擇。
隻是，請注意浏覽器支持，并最終将此庫與 Intersection Observer API 的 polyfill 集成。
#4 圖像模糊效果的延遲加載
如果您是Medium讀者，您肯定已經注意到該網站如何在帖子中(zhōng)加載主圖片。
您首先看到的是圖像的模糊、低分(fēn)辨率副本，而其高分(fēn)辨率版本正在延遲加載。
您可以通過多種方式延遲加載具有這種有趣模糊效果的圖像。
我(wǒ)(wǒ)們最喜歡的技術是 Craig Buckler。這是此解決方案的所有優點：
性能：隻有 463 字節的 CSS 和 1,007 字節的縮小(xiǎo)JavaScript代碼
支持視網膜屏幕
無依賴：不需要 jQuery 或其他庫和框架
逐步增強以抵消舊(jiù)浏覽器和失敗的 JavaScript
#5 Yall.js
Yall 是一(yī)個功能豐富的延遲加載腳本，用于圖像、視頻(pín)和 iframe。更具體(tǐ)地說，它使用 Intersection Observer API，并在必要時巧妙地使用傳統的事件處理程序技術。
在您的文檔中(zhōng)包含 Yall 時，您需要按如下(xià)方式對其進行初始化：
<script src="yall.min.js"></script> <script> document.addEventListener("DOMContentLoaded", yall); </script>
接下(xià)來，要延遲加載一(yī)個簡單的img元素，您隻需在标記中(zhōng)執行以下(xià)操作：
<img class="lazy" src="placeholder.jpg" data-src="image-to-lazy-load.jpg" alt="Alternative text to describe image.">
請注意以下(xià)事項：
您将類添加到元素
src值是一(yī)個占位符圖像
要延遲加載的圖像的路徑在data-src屬性内
Yall 的好處包括：
Intersection Observer API 的出色性能
出色的浏覽器支持（它可以追溯到 IE11）
不需要其他依賴項
結論
你有五種延遲加載圖像的方法，您可以開(kāi)始在您的項目中(zhōng)進行試驗和測試。
