現代網頁應用中，圖片已成為最常用的內容類型之一。雖然使用背景圖片可以提升應用的視覺效果，但圖片尺寸過大卻會嚴重影響應用性能。
即使經過優化，圖片仍然可能佔用大量空間，導致用戶等待時間過長。如果用戶沒有獲得快速訪問內容的體驗，他們往往會失去耐心並轉向其他網站，因此，高效的圖片加載方案至關重要。
本文將介紹五種圖片懶加載方法，幫助您優化網站，提升用戶體驗。這些方法適用於各種類型的圖片，包括背景圖片、內聯圖片和橫幅圖片。
關鍵要點
什麼是懶加載？
圖片懶加載意味著異步加載網站上的圖片。可以在頁面可見內容完全加載後，或僅當圖片出現在瀏覽器視窗中時，按需加載內容。這意味著如果用戶沒有向下滾動到底部，頁面底部的圖片甚至不會被加載，從而最終提高應用程序性能。
對於大多數網站來說，了解如何在HTML中啟用懶加載至關重要。例如，嘗試瀏覽您最喜歡的包含高清照片的網站，您很快就會發現網站只加載了有限數量的圖片。當您向下滾動頁面時，佔位符圖片會迅速被實際圖片替換。
例如，請注意Unsplash.com上的加載器：將頁面該部分滾動到視圖中會觸髮用全分辨率照片替換佔位符：
為什麼要實現圖片懶加載？
了解如何懶加載圖片對於優化網頁性能至關重要，尤其是在包含大量視覺內容的頁面上。以下是一些應該考慮為您的網站懶加載圖片的理由：
1. 提升DOM加載時間
2. 節省帶寬
懶加載圖片有助於提高網站性能，但最好的方法是什麼呢？
沒有完美的方法。
如果您精通JavaScript，那麼實現您自己的懶加載解決方案應該不成問題。沒有什麼比自己編寫代碼更能賦予您控制權了。
或者，您可以瀏覽網絡以尋找可行的方法，或加入討論論壇並分享想法。我做了同樣的事情，並發現了這五種有趣的方法。
1. 原生懶加載
當用戶滾動網頁時，圖片和iframe的原生懶加載是一種直接加載內容的方法。您只需要將loading="lazy"屬性添加到您的圖片和iframe即可。
<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></pre>登入後複製
如您所見，不需要JavaScript，也不需要動態替換src屬性的值，只需使用普通的HTML即可。此方法是無需任何額外開銷地在HTML中添加懶加載的完美示例。
“loading”屬性使我們可以延遲加載屏幕外的圖片和iframe，直到用戶滾動到頁面上的相應位置。 “loading”可以取以下三個值中的任何一個：
此方法無可匹敵：它幾乎沒有額外開銷，並且是乾淨簡單的在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和使用它懶加載圖片的優秀教程。以下是他的解決方案：
假設您想懶加載一個圖片庫。每個圖片的標記如下所示：
<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></pre>登入後複製
在這裡，圖片的路徑包含在data-src屬性中，而不是src屬性中。原因是使用src意味著圖片會立即加載，這不是您想要的。
在CSS中，您可以為每個圖片指定一個min-height值，例如100px。這會給每個圖片佔位符（沒有src屬性的img元素）一個垂直尺寸：
<img src="https://img.php.cn/upload/article/000/000/000/173897821665537.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance " /></pre>登入後複製
然後，在JavaScript文檔中，您需要創建一個配置對象並使用intersectionObserver實例註冊它：
img {
min-height: 100px;
/* more styles here */
}</pre>登入後複製最後，您可以迭代所有圖片並將它們添加到此iterationObserver實例中：
// 创建配置对象：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);</pre>登入後複製此解決方案的優點是易於實現、有效且具有相交性。 Observer承擔了計算方面的大部分工作。
在瀏覽器支持方面，除了IE 11和Opera Mini之外，所有主流瀏覽器在其最新版本中都支持Intersection Observer API。
您可以在Denys的文章中了解有關Intersection Observer API和此實現細節的更多信息。
3. Lozad.js
實現圖片懶加載的快速簡便的替代方法是讓JS庫為您完成大部分工作。
Lozad.js是一個高性能、輕量級且可配置的懶加載器，它使用純JavaScript，沒有任何依賴項。它是用戶滾動時懶加載JavaScript、圖片、視頻和iframe的優秀工具。
您可以使用npm/Yarn安裝Lozad，並使用您選擇的模塊打包器導入它：
const imgs = document.querySelectorAll('[data-src]');
imgs.forEach(img => {
observer.observe(img);
});</pre>登入後複製npm install --save lozad yarn add lozad</pre>登入後複製
或者，您可以簡單地使用CDN下載庫，並將其添加到HTML頁面底部的</pre>
lozad接下來，對於基本實現，請將類
import lozad from 'lozad';</pre>登入後複製
最後，在您的JS文檔中實例化Lozad：
<img src="https://img.php.cn/upload/article/000/000/000/173897821885662.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance " /></pre>登入後複製
您可以在Lozad GitHub存儲庫中找到使用該庫的所有詳細信息。
如果您不想了解Intersection Observer API，或者您只是在尋找適用於各種內容類型的快速實現，那麼Lozad是一個不錯的選擇。
4. 帶模糊圖片效果的懶加載
<script></code>标签中：</p> <pre class="brush:php;toolbar:false"><code class="language-html"><script src="https://cdn.jsdelivr.net/npm/lozad"></script>如果您是Medium的讀者，您肯定注意到該網站是如何加載帖子中的主圖片的。您首先看到的是圖片的模糊低分辨率副本，而其高分辨率版本正在懶加載：
您可以通過將CSS和JavaScript結合使用，在HTML中懶加載圖片時獲得類似的效果。
您可以通過多種方式為圖片添加這種有趣的模糊效果的懶加載。
我最喜歡的方法是Craig Buckler的方法。以下是此解決方案的所有優點：
您可以在“How to Build Your Own Progressive Image Loader”中閱讀所有相關信息，並在項目的GitHub存儲庫中下載代碼。
5. Yall.js
Yall.js是一個功能豐富的JavaScript庫，它使用Intersection Observer API在用戶滾動時懶加載JavaScript。它支持圖片、視頻、iframe，並在必要時巧妙地回退到傳統的事件處理程序技術。
在文檔中包含Yall時，您需要按如下方式初始化它：
<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></pre>登入後複製
接下來，要懶加載一個簡單的img元素，您只需要在標記中執行以下操作：
<img src="https://img.php.cn/upload/article/000/000/000/173897821665537.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance " /></pre>登入後複製
請注意以下幾點：
lazy添加到元素。 src的值是一個佔位符圖片。 data-src屬性中。 以下是Yall.js的優點：
要了解有關Yall.js可以提供的內容以及更複雜的實現的更多信息，請隨時查看GitHub上的項目頁面。
結論
這就是您可以開始在項目中試驗和測試的五種圖片懶加載方法。了解如何懶加載圖片對於任何Web開發人員來說都是一項寶貴的技能。您可以通過加入此SitePoint論壇了解有關圖片優化的更多技術或與他人分享您的專業知識。
關於圖片懶加載的常見問題
什麼是圖片懶加載？
懶加載是一種Web開發技術，用於通過延遲加載某些元素（例如圖片）來提高網頁性能，直到需要它們為止。圖片懶加載意味著只有當圖片進入用戶的視窗或在網頁上可見時才加載圖片，而不是在頁面最初呈現時立即加載所有圖片。
圖片懶加載的好處是什麼？
如何在HTML中懶加載圖片？
要在HTML中為圖片添加懶加載，您可以使用“loading”屬性。 “loading”屬性是一個標準的HTML屬性，允許您控制何時應加載圖片。要啟用HTML懶加載圖片，請將“loading”屬性的值設置為“lazy”，添加到img元素中。這會告訴瀏覽器只有當圖片即將進入視窗時才加載它。這是一個示例：
<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></pre>登入後複製
圖片懶加載好嗎？
是的，在Web開發中使用懶加載圖片HTML被認為是一種有益的做法，原因如下。它通過延遲加載非必需的圖片加載來提高頁面加載速度，從而加快初始頁面渲染速度並改善用戶體驗。這種方法節省了帶寬，對於具有有限數據計劃或較慢互聯網連接的用戶來說是有利的。此外，它通過提高頁面加載速度對搜索引擎優化（SEO）產生積極影響，並且符合漸進增強的原則。通過減少感知等待時間並在加載過程中提供視覺提示，懶加載有助於提供更流暢、更高效的瀏覽體驗，尤其是在移動設備上。
如何知道圖片是否已懶加載？
要確認您是否已正確實現如何在HTML中懶加載圖片，您可以檢查HTML源代碼或使用瀏覽器開發者工具。通過右鍵單擊圖片並選擇“檢查”或“檢查元素”，您可以在開發者工具面板中檢查表示圖片的img元素。查找img元素中是否存在“loading”屬性。如果“loading”屬性設置為“lazy”，則表示圖片已配置為懶加載。使用瀏覽器開發者工具，您可以通過檢查圖片的屬性來快速確定圖片的懶加載狀態。
如何使用JavaScript實現圖片懶加載？
要使用JavaScript實現圖片懶加載，您可以使用Lozad.js或Yall.js等庫，或者您可以使用Intersection Observer API編寫自己的自定義解決方案。這些庫允許您通過監視元素何時進入視窗並在那一刻加載它們來按需加載內容。
圖片懶加載會影響SEO嗎？
是的，圖片懶加載會對SEO產生積極影響。通過提高頁面加載時間並減少最初需要加載的數據量，懶加載可以幫助您的網站在搜索引擎結果中獲得更好的排名。更快的頁面速度是像Google這樣的搜索引擎已知的排名因素，而懶加載可以通過確保您的網站圖片不會減慢整體性能來促進這一點。
原生懶加載和基於JavaScript的懶加載有什麼區別？
原生懶加載依賴於瀏覽器對<img alt="5種懶惰加載圖像以提高網站性能的技術" >和<iframe></iframe>標籤中“loading”屬性的內置支持。此方法簡單，不需要額外的JavaScript。另一方面，基於JavaScript的懶加載（通常使用Lozad.js或Intersection Observer API等庫實現）提供了更大的靈活性和自定義性。
圖片懶加載有什麼缺點嗎？
主要的缺點是，當用戶向下滾動頁面時，圖片可能會延遲加載。此外，一些舊版瀏覽器可能不支持懶加載。
我可以在WordPress中懶加載圖片嗎？
是的，您可以在WordPress中輕鬆懶加載圖片。許多主題現在默認支持原生懶加載，但您也可以使用“Lazy Load by WP Rocket”或“Smush”等插件來實現懶加載，而無需任何編碼。
以上是5種懶惰加載圖像以提高網站性能的技術的詳細內容。更多資訊請關注PHP中文網其他相關文章！
