要實(shí)現(xiàn)HTML5 懶加載圖片，主要有兩種方法：1. 使用 標(biāo)籤的loading="lazy" 屬性，適用於現(xiàn)代瀏覽器，無需JS；2. 使用Intersection Observer API 實(shí)現(xiàn)更靈活控制和兼容舊瀏覽器。使用loading="lazy" 時(shí)需注意不應(yīng)用於首屏圖片，且其有auto、lazy、eager 三個(gè)值。 Intersection Observer 需通過data-src 存儲(chǔ)真實(shí)地址並在進(jìn)入視口時(shí)賦值src。同時(shí)應(yīng)注意設(shè)置固定寬高、使用佔(zhàn)位圖、避免重要圖片懶加載、配合srcset 和緩存策略以優(yōu)化體驗(yàn)與性能。

懶加載圖片在HTML5 中其實(shí)已經(jīng)變得非常簡單了，主要靠<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175233613755932.jpeg" class="lazy" alt="如何在HTML5中懶負(fù)載圖像？" >標(biāo)籤的loading屬性來實(shí)現(xiàn)。你只需要加一個(gè)屬性，瀏覽器就能自動(dòng)延遲加載不在視口內(nèi)的圖片。

使用loading="lazy"是最直接的方法

HTML5 原生支持懶加載的方式就是給<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175233613858057.jpeg" class="lazy" alt="如何在HTML5中懶負(fù)載圖像？" >標(biāo)籤加上loading="lazy"屬性。這樣，瀏覽器會(huì)等到圖片接近用戶可視區(qū)域時(shí)才開始加載。

舉個(gè)例子：

 <img src="/static/imghw/default1.png"  data-src="image.jpg"  class="lazy" alt="如何在HTML5中懶負(fù)載圖像？" loading="lazy">

這個(gè)方法適用於大多數(shù)現(xiàn)代瀏覽器（Chrome、Edge、Firefox 等），不需要額外引入JS 或者復(fù)雜的配置。

需要注意幾點(diǎn)：

• 不建議對(duì)首屏圖片使用懶加載，可能會(huì)影響加載速度和SEO；
• loading有三個(gè)值： auto 、 lazy和eager ，默認(rèn)是auto ，也就是由瀏覽器決定是否懶加載；
• 如果你想兼容舊瀏覽器（比如IE），那就得用JavaScript 的Intersection Observer 來實(shí)現(xiàn)。

配合Intersection Observer 實(shí)現(xiàn)更靈活控制

如果你需要更多控制權(quán)，或者想兼容一些不支持loading="lazy"的瀏覽器，可以用Intersection Observer API。

基本思路是先讓圖片佔(zhàn)位，等它進(jìn)入可視區(qū)域時(shí)再把真正的圖片地址賦給src屬性。

示例代碼如下：

 <img class="lazy-img lazy"  src="/static/imghw/default1.png"  data-src="image.jpg"  data- alt="如何在HTML5中懶負(fù)載圖像？">

然後寫一段JS 監(jiān)聽是否進(jìn)入視口：

 const images = document.querySelectorAll('.lazy-img');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

images.forEach(img => observer.observe(img));

這種方式適合需要做動(dòng)畫、加載優(yōu)化、或兼容性要求高的項(xiàng)目。

懶加載圖片也要注意用戶體驗(yàn)

雖然懶加載能提升性能，但如果處理不好，用戶可能會(huì)看到空白區(qū)域太久，影響體驗(yàn)。

你可以：

• 給圖片設(shè)置固定寬高，防止佈局抖動(dòng)；
• 加載前顯示佔(zhàn)位圖或骨架屏；
• 對(duì)於重要的圖片（比如輪播圖），不要使用懶加載；
• 同時(shí)使用srcset和sizes ，讓瀏覽器根據(jù)設(shè)備選擇合適的圖片尺寸。

另外，如果是從服務(wù)器加載圖片，確保設(shè)置了合適的緩存策略和響應(yīng)頭，避免重複請(qǐng)求影響加載速度。

基本上就這些。 HTML5 的原生懶加載功能已經(jīng)很實(shí)用了，配合JS 可以做到更精細(xì)的控制。關(guān)鍵是根據(jù)項(xiàng)目需求選對(duì)方式，別一股腦全用了懶加載，也別完全不用，平衡好性能和體驗(yàn)才是重點(diǎn)。

以上是如何在HTML5中懶負(fù)載圖像？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！