現(xiàn)代網(wǎng)頁應(yīng)用中，圖片已成為最常用的內(nèi)容類型之一。雖然使用背景圖片可以提升應(yīng)用的視覺效果，但圖片尺寸過大卻會(huì)嚴(yán)重影響應(yīng)用性能。

即使經(jīng)過優(yōu)化，圖片仍然可能佔(zhàn)用大量空間，導(dǎo)致用戶等待時(shí)間過長。如果用戶沒有獲得快速訪問內(nèi)容的體驗(yàn)，他們往往會(huì)失去耐心並轉(zhuǎn)向其他網(wǎng)站，因此，高效的圖片加載方案至關(guān)重要。

本文將介紹五種圖片懶加載方法，幫助您優(yōu)化網(wǎng)站，提升用戶體驗(yàn)。這些方法適用於各種類型的圖片，包括背景圖片、內(nèi)聯(lián)圖片和橫幅圖片。

關(guān)鍵要點(diǎn)

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

什麼是懶加載？

圖片懶加載意味著異步加載網(wǎng)站上的圖片?？梢栽陧撁婵梢妰?nèi)容完全加載後，或僅當(dāng)圖片出現(xiàn)在瀏覽器視窗中時(shí)，按需加載內(nèi)容。這意味著如果用戶沒有向下滾動(dòng)到底部，頁面底部的圖片甚至不會(huì)被加載，從而最終提高應(yīng)用程序性能。

對(duì)於大多數(shù)網(wǎng)站來說，了解如何在HTML中啟用懶加載至關(guān)重要。例如，嘗試瀏覽您最喜歡的包含高清照片的網(wǎng)站，您很快就會(huì)發(fā)現(xiàn)網(wǎng)站只加載了有限數(shù)量的圖片。當(dāng)您向下滾動(dòng)頁面時(shí)，佔(zhàn)位符圖片會(huì)迅速被實(shí)際圖片替換。

例如，請(qǐng)注意Unsplash.com上的加載器：將頁面該部分滾動(dòng)到視圖中會(huì)觸髮用全分辨率照片替換佔(zhàn)位符：

為什麼要實(shí)現(xiàn)圖片懶加載？

了解如何懶加載圖片對(duì)於優(yōu)化網(wǎng)頁性能至關(guān)重要，尤其是在包含大量視覺內(nèi)容的頁面上。以下是一些應(yīng)該考慮為您的網(wǎng)站懶加載圖片的理由：

1. 提升DOM加載時(shí)間

• 如果您的網(wǎng)站使用JavaScript來顯示內(nèi)容或?yàn)橛脩籼峁┠撤N功能，則快速加載DOM至關(guān)重要。腳本通常會(huì)在DOM完全加載後才開始運(yùn)行。在一個(gè)包含大量圖片的網(wǎng)站上，懶加載（或異步加載圖片）可能決定著用戶是繼續(xù)瀏覽還是離開您的網(wǎng)站。

2. 節(jié)省帶寬

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

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

沒有完美的方法。

如果您精通JavaScript，那麼實(shí)現(xiàn)您自己的懶加載解決方案應(yīng)該不成問題。沒有什麼比自己編寫代碼更能賦予您控制權(quán)了。

或者，您可以瀏覽網(wǎng)絡(luò)以尋找可行的方法，或加入討論論壇並分享想法。我做了同樣的事情，並發(fā)現(xiàn)了這五種有趣的方法。

1. 原生懶加載

當(dāng)用戶滾動(dòng)網(wǎng)頁時(shí)，圖片和iframe的原生懶加載是一種直接加載內(nèi)容的方法。您只需要將loading="lazy"屬性添加到您的圖片和iframe即可。

<img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173897821515260.jpg"  class="lazy" alt="5 Techniques for Lazy Loading Images to Boost Website Performance " />
<iframe loading="lazy" src="content.html"></iframe></pre>
如您所見，不需要JavaScript，也不需要?jiǎng)討B(tài)替換src屬性的值，只需使用普通的HTML即可。此方法是無需任何額外開銷地在HTML中添加懶加載的完美示例。 
“l(fā)oading”屬性使我們可以延遲加載屏幕外的圖片和iframe，直到用戶滾動(dòng)到頁面上的相應(yīng)位置。 “l(fā)oading”可以取以下三個(gè)值中的任何一個(gè)：

lazy：非常適合懶加載
eager：指示瀏覽器立即加載指定內(nèi)容
auto：將是否懶加載的選項(xiàng)留給瀏覽器。 

此方法無可匹敵：它幾乎沒有額外開銷，並且是乾淨(jìng)簡單的在HTML中懶加載圖片的方法。但是，儘管大多數(shù)主流瀏覽器都很好地支持“l(fā)oading”屬性，但在撰寫本文時(shí)，一些瀏覽器仍然缺乏完全的支持。 
有關(guān)此HTML懶加載圖片的強(qiáng)大功能（包括瀏覽器支持變通方法）的深入文章，請(qǐng)不要錯(cuò)過Addy Osmani的“Native image lazy-loading for the web!”。 
2. 使用Intersection Observer API進(jìn)行懶加載
Intersection Observer API是一個(gè)現(xiàn)代接口，您可以利用它來懶加載圖片和其他內(nèi)容。 
以下是MDN對(duì)該API的介紹：

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

換句話說，Intersection Observer API異步地監(jiān)視一個(gè)元素與另一個(gè)元素的相交情況。 
Denys Mishunov撰寫了一篇關(guān)於Intersection Observer和使用它懶加載圖片的優(yōu)秀教程。以下是他的解決方案：
假設(shè)您想懶加載一個(gè)圖片庫。每個(gè)圖片的標(biāo)記如下所示：
<img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173897821515260.jpg"  class="lazy" alt="5 Techniques for Lazy Loading Images to Boost Website Performance " />
<iframe loading="lazy" src="content.html"></iframe></pre>
在這裡，圖片的路徑包含在data-src屬性中，而不是src屬性中。原因是使用src意味著圖片會(huì)立即加載，這不是您想要的。 
在CSS中，您可以為每個(gè)圖片指定一個(gè)min-height值，例如100px。這會(huì)給每個(gè)圖片佔(zhàn)位符（沒有src屬性的img元素）一個(gè)垂直尺寸：
<img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173897821665537.jpg"  class="lazy" alt="5 Techniques for Lazy Loading Images to Boost Website Performance " /></pre>
然後，在JavaScript文檔中，您需要?jiǎng)?chuàng)建一個(gè)配置對(duì)象並使用intersectionObserver實(shí)例註冊(cè)它：
img {
  min-height: 100px;
  /* more styles here */
}</pre>
最後，您可以迭代所有圖片並將它們添加到此iterationObserver實(shí)例中：
// 創(chuàng)建配置對(duì)象：rootMargin和threshold是接口公開的兩個(gè)屬性
const config = {
  rootMargin: '0px 0px 50px 0px',
  threshold: 0
};

// 使用intersectionObserver實(shí)例注冊(cè)配置對(duì)象
let observer = new IntersectionObserver(function(entries, self) {
  // 迭代每個(gè)條目
  entries.forEach(entry => {
    // 只處理相交的圖片。isIntersecting是接口公開的屬性
    if(entry.isIntersecting) {
      // 將圖片路徑從data-src復(fù)制到src的自定義函數(shù)
      preloadImage(entry.target);
      // 圖片現(xiàn)在已就位，停止觀察
      self.unobserve(entry.target);
    }
  });
}, config);</pre>
此解決方案的優(yōu)點(diǎn)是易於實(shí)現(xiàn)、有效且具有相交性。 Observer承擔(dān)了計(jì)算方面的大部分工作。 
在瀏覽器支持方面，除了IE 11和Opera Mini之外，所有主流瀏覽器在其最新版本中都支持Intersection Observer API。 
您可以在Denys的文章中了解有關(guān)Intersection Observer API和此實(shí)現(xiàn)細(xì)節(jié)的更多信息。 
3. Lozad.js

實(shí)現(xiàn)圖片懶加載的快速簡便的替代方法是讓JS庫為您完成大部分工作。 
Lozad.js是一個(gè)高性能、輕量級(jí)且可配置的懶加載器，它使用純JavaScript，沒有任何依賴項(xiàng)。它是用戶滾動(dòng)時(shí)懶加載JavaScript、圖片、視頻和iframe的優(yōu)秀工具。 
您可以使用npm/Yarn安裝Lozad，並使用您選擇的模塊打包器導(dǎo)入它：
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接下來，對(duì)於基本實(shí)現(xiàn)，請(qǐng)將類
添加到標(biāo)記中的資源中：
import lozad from 'lozad';</pre>

最後，在您的JS文檔中實(shí)例化Lozad：
<img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173897821885662.jpg"  class="lazy" alt="5 Techniques for Lazy Loading Images to Boost Website Performance " /></pre>

您可以在Lozad GitHub存儲(chǔ)庫中找到使用該庫的所有詳細(xì)信息。 

如果您不想了解Intersection Observer API，或者您只是在尋找適用於各種內(nèi)容類型的快速實(shí)現(xiàn)，那麼Lozad是一個(gè)不錯(cuò)的選擇。 

4. 帶模糊圖片效果的懶加載
<script></code>標(biāo)簽中：</p>
<pre class="brush:php;toolbar:false"><code class="html"><script src="https://cdn.jsdelivr.net/npm/lozad"></script>
如果您是Medium的讀者，您肯定注意到該網(wǎng)站是如何加載帖子中的主圖片的。您首先看到的是圖片的模糊低分辨率副本，而其高分辨率版本正在懶加載：
您可以通過將CSS和JavaScript結(jié)合使用，在HTML中懶加載圖片時(shí)獲得類似的效果。 


您可以通過多種方式為圖片添加這種有趣的模糊效果的懶加載。 
我最喜歡的方法是Craig Buckler的方法。以下是此解決方案的所有優(yōu)點(diǎn)：

性能：只有463字節(jié)的CSS和1007字節(jié)的壓縮JavaScript代碼。 
支持視網(wǎng)膜屏幕。 
無依賴性：不需要jQuery或其他庫和框架。 
漸進(jìn)增強(qiáng)以應(yīng)對(duì)舊版瀏覽器和JavaScript故障。 

您可以在“How to Build Your Own Progressive Image Loader”中閱讀所有相關(guān)信息，並在項(xiàng)目的GitHub存儲(chǔ)庫中下載代碼。 
5. Yall.js
Yall.js是一個(gè)功能豐富的JavaScript庫，它使用Intersection Observer API在用戶滾動(dòng)時(shí)懶加載JavaScript。它支持圖片、視頻、iframe，並在必要時(shí)巧妙地回退到傳統(tǒng)的事件處理程序技術(shù)。 
在文檔中包含Yall時(shí)，您需要按如下方式初始化它：
<img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173897821515260.jpg"  class="lazy" alt="5 Techniques for Lazy Loading Images to Boost Website Performance " />
<iframe loading="lazy" src="content.html"></iframe></pre>
接下來，要懶加載一個(gè)簡單的img元素，您只需要在標(biāo)記中執(zhí)行以下操作：
<img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173897821665537.jpg"  class="lazy" alt="5 Techniques for Lazy Loading Images to Boost Website Performance " /></pre>
請(qǐng)注意以下幾點(diǎn)：

您將類lazy添加到元素。 
src的值是一個(gè)佔(zhàn)位符圖片。 
您要懶加載的圖片路徑位於data-src屬性中。 

以下是Yall.js的優(yōu)點(diǎn)：

使用Intersection Observer API獲得出色的性能。 
優(yōu)秀的瀏覽器支持（它可以追溯到IE11）。 
不需要其他依賴項(xiàng)。 

要了解有關(guān)Yall.js可以提供的內(nèi)容以及更複雜的實(shí)現(xiàn)的更多信息，請(qǐng)隨時(shí)查看GitHub上的項(xiàng)目頁面。 
結(jié)論
這就是您可以開始在項(xiàng)目中試驗(yàn)和測(cè)試的五種圖片懶加載方法。了解如何懶加載圖片對(duì)於任何Web開發(fā)人員來說都是一項(xiàng)寶貴的技能。您可以通過加入此SitePoint論壇了解有關(guān)圖片優(yōu)化的更多技術(shù)或與他人分享您的專業(yè)知識(shí)。 
關(guān)於圖片懶加載的常見問題
什麼是圖片懶加載？ 
懶加載是一種Web開發(fā)技術(shù)，用於通過延遲加載某些元素（例如圖片）來提高網(wǎng)頁性能，直到需要它們?yōu)橹埂D片懶加載意味著只有當(dāng)圖片進(jìn)入用戶的視窗或在網(wǎng)頁上可見時(shí)才加載圖片，而不是在頁面最初呈現(xiàn)時(shí)立即加載所有圖片。 
圖片懶加載的好處是什麼？ 

提高網(wǎng)站性能
加快初始頁面渲染速度，並減少帶寬使用量。 
增強(qiáng)用戶體驗(yàn)。 
減少服務(wù)器負(fù)載並提高Web應(yīng)用程序的整體效率。 

如何在HTML中懶加載圖片？ 
要在HTML中為圖片添加懶加載，您可以使用“l(fā)oading”屬性。 “l(fā)oading”屬性是一個(gè)標(biāo)準(zhǔn)的HTML屬性，允許您控制何時(shí)應(yīng)加載圖片。要啟用HTML懶加載圖片，請(qǐng)將“l(fā)oading”屬性的值設(shè)置為“l(fā)azy”，添加到img元素中。這會(huì)告訴瀏覽器只有當(dāng)圖片即將進(jìn)入視窗時(shí)才加載它。這是一個(gè)示例：
<img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173897821515260.jpg"  class="lazy" alt="5 Techniques for Lazy Loading Images to Boost Website Performance " />
<iframe loading="lazy" src="content.html"></iframe></pre>
圖片懶加載好嗎？ 
是的，在Web開發(fā)中使用懶加載圖片HTML被認(rèn)為是一種有益的做法，原因如下。它通過延遲加載非必需的圖片加載來提高頁面加載速度，從而加快初始頁面渲染速度並改善用戶體驗(yàn)。這種方法節(jié)省了帶寬，對(duì)於具有有限數(shù)據(jù)計(jì)劃或較慢互聯(lián)網(wǎng)連接的用戶來說是有利的。此外，它通過提高頁面加載速度對(duì)搜索引擎優(yōu)化（SEO）產(chǎn)生積極影響，並且符合漸進(jìn)增強(qiáng)的原則。通過減少感知等待時(shí)間並在加載過程中提供視覺提示，懶加載有助於提供更流暢、更高效的瀏覽體驗(yàn)，尤其是在移動(dòng)設(shè)備上。 
如何知道圖片是否已懶加載？ 
要確認(rèn)您是否已正確實(shí)現(xiàn)如何在HTML中懶加載圖片，您可以檢查HTML源代碼或使用瀏覽器開發(fā)者工具。通過右鍵單擊圖片並選擇“檢查”或“檢查元素”，您可以在開發(fā)者工具面板中檢查表示圖片的img元素。查找img元素中是否存在“l(fā)oading”屬性。如果“l(fā)oading”屬性設(shè)置為“l(fā)azy”，則表示圖片已配置為懶加載。使用瀏覽器開發(fā)者工具，您可以通過檢查圖片的屬性來快速確定圖片的懶加載狀態(tài)。 
如何使用JavaScript實(shí)現(xiàn)圖片懶加載？ 
要使用JavaScript實(shí)現(xiàn)圖片懶加載，您可以使用Lozad.js或Yall.js等庫，或者您可以使用Intersection Observer API編寫自己的自定義解決方案。這些庫允許您通過監(jiān)視元素何時(shí)進(jìn)入視窗並在那一刻加載它們來按需加載內(nèi)容。 
圖片懶加載會(huì)影響SEO嗎？ 
是的，圖片懶加載會(huì)對(duì)SEO產(chǎn)生積極影響。通過提高頁面加載時(shí)間並減少最初需要加載的數(shù)據(jù)量，懶加載可以幫助您的網(wǎng)站在搜索引擎結(jié)果中獲得更好的排名。更快的頁面速度是像Google這樣的搜索引擎已知的排名因素，而懶加載可以通過確保您的網(wǎng)站圖片不會(huì)減慢整體性能來促進(jìn)這一點(diǎn)。 
原生懶加載和基於JavaScript的懶加載有什麼區(qū)別？ 
原生懶加載依賴於瀏覽器對(duì)<img  alt="5種懶惰加載圖像以提高網(wǎng)站性能的技術(shù)" >和<iframe></iframe>標(biāo)籤中“l(fā)oading”屬性的內(nèi)置支持。此方法簡單，不需要額外的JavaScript。另一方面，基於JavaScript的懶加載（通常使用Lozad.js或Intersection Observer API等庫實(shí)現(xiàn)）提供了更大的靈活性和自定義性。 
圖片懶加載有什麼缺點(diǎn)嗎？ 
主要的缺點(diǎn)是，當(dāng)用戶向下滾動(dòng)頁面時(shí)，圖片可能會(huì)延遲加載。此外，一些舊版瀏覽器可能不支持懶加載。 
我可以在WordPress中懶加載圖片嗎？ 
是的，您可以在WordPress中輕鬆?wèi)屑虞d圖片。許多主題現(xiàn)在默認(rèn)支持原生懶加載，但您也可以使用“Lazy Load by WP Rocket”或“Smush”等插件來實(shí)現(xiàn)懶加載，而無需任何編碼。 
以上是5種懶惰加載圖像以提高網(wǎng)站性能的技術(shù)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！