在標(biāo)籤上使用Loading =“ Lazy”屬性進(jìn)行本機(jī)懶惰加載，並在沒(méi)有JavaScript的現(xiàn)代瀏覽器中支持，但請(qǐng)避免使用以上圖像。 2。對(duì)於自定義控件，請(qǐng)使用與Data-SRC的交叉點(diǎn)觀察者API進(jìn)入視口時(shí)加載圖像，添加CSS過(guò)渡以進(jìn)行平滑效果，並確保在需要時(shí)與多填充的兼容性。 3。始終設(shè)置寬度和高度屬性，以防止佈局偏移，使用低質(zhì)量的佔(zhàn)位符，避免懶惰加載關(guān)鍵圖像，測(cè)試JavaScript-DisabledisableSables後備後備，並考慮解碼=“ async”以提高性能。為簡(jiǎn)單起見(jiàn)，請(qǐng)使用本機(jī)懶負(fù)載，以及用於高級(jí)需求的基於JavaScript的方法，都大大改善了頁(yè)面負(fù)載性能。

HTML中的懶惰加載圖像是通過(guò)推遲屏幕外圖像的加載直至用戶滾動(dòng)附近的屏幕加載來(lái)提高頁(yè)面加載性能的好方法。這是您可以有效實(shí)施的方法：

1。使用loading屬性（本機(jī)懶負(fù)荷）

最簡(jiǎn)單，最現(xiàn)代的方法是在<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175373272562154.jpeg" class="lazy" alt="如何在HTML中實(shí)現(xiàn)圖像的懶惰加載？" >標(biāo)籤上使用內(nèi)置loading屬性。支持它的瀏覽器將自動(dòng)處理懶惰加載。

 <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175373272562154.jpeg"  class="lazy"  src =“ image.jpg” alt =“描述” loading =“ lazy” />

• loading="lazy" ：告訴瀏覽器僅在輸入視口接近時(shí)加載圖像。
• loading="eager" ：立即加載圖像（默認(rèn)行為）。

?在Chrome，Edge，F(xiàn)irefox和Safari中支持（有些變化）。
?無(wú)需JavaScript。

注意：始終在折疊下方的圖像上使用它。避免使用懶惰的英雄或折疊圖像，因?yàn)樗赡軙?huì)延遲重要內(nèi)容。

2。使用Intersection Observer進(jìn)行自定義控制

有關(guān)更多控制（例如，佔(zhàn)位符，後備或較舊的瀏覽器支持），請(qǐng)與IntersectionObserver API一起使用JavaScript。

html：

 <img data-src =“ image1.jpg” alt =“ image 1” class =“ lazy” />
<img data-src =“ image2.jpg” alt =“ image 2” class =“ lazy” />

CSS（可選佔(zhàn)位符）：

 。懶惰的 {
  不透明度：0;
  過(guò)渡：不透明度0.4；
}

.lazy.負(fù)載{
  不透明度：1;
}

JavaScript：

 document.addeventlistener（“ domcontentloaded”，function（）{
  const lazyimages = document.queryselectorall（“。懶惰”）;

  const imageObserver = new IntersectionObserver（（（enties，observer）=> {
    entries.foreach（entry => {
      if（entry.isdertering）{
        const img = entry.target;
        img.src = img.dataset.src;
        img.classlist.add（“加載”）;
        observer.unobserve（img）;
      }
    }）;
  }）;

  lazyimages.foreach（img => {
    ImageObserver.Observe（img）;
  }）;
}）;

？此方法：

• 僅當(dāng)圖像進(jìn)入視口時(shí)，才加載。
• 通過(guò)CSS添加了光滑的淡入效果。
• 在所有現(xiàn)代瀏覽器中工作（較老的瀏覽器）。

3。最佳實(shí)踐和技巧

• 始終包含width和height屬性，以防止佈局偏移：

   <img  src =“佔(zhàn)位符。</pre alt="如何在HTML中實(shí)現(xiàn)圖像的懶惰加載？" ></li><li><p>實(shí)際圖像加載時(shí)，<strong>請(qǐng)使用低質(zhì)量的佔(zhàn)位符或模糊預(yù)覽</strong>。</p></li><li><p><strong>避免懶惰的關(guān)鍵圖像</strong>（例如徽標(biāo)或英雄橫幅）。</p></li><li><p>針對(duì)禁用JavaScript的用戶（如果使用基於JS的Lazy Loading）<strong>測(cè)試後備</strong>。</p></li><li><p><strong>考慮使用<code>decoding="async"</code></strong>以使瀏覽器異步解碼圖像：</p><pre class='brush:php;toolbar:false;'> <img src =“ image.jpg”解碼=“ async” loading =“ lazy” alt =“ ...”>

  ---

  基本上，在大多數(shù)情況下使用loading="lazy" - 它很簡(jiǎn)單且受到廣泛支持。為了進(jìn)行高級(jí)控製或兼容性，請(qǐng)將data-src與IntersectionObserver配對(duì)。並不復(fù)雜，但在性能上有很大的不同。

  以上是如何在HTML中實(shí)現(xiàn)圖像的懶惰加載？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！