圖片懶加載是一種優(yōu)化網頁性能的技術，它可以延遲加載頁面上的圖片，只有當圖片即將出現在用戶的視口中時才加載它們。這樣可以減少頁面的加載時間，提高用戶體驗和網站的整體性能。在本文中，我將介紹幾種常用的圖片懶加載方法。

1. 基于Intersection Observer的懶加載：

Intersection Observer是瀏覽器提供的一種API，可以監(jiān)測元素是否進入了用戶的視口。通過使用Intersection Observer，我們可以監(jiān)聽圖片元素是否可見，當圖片進入視口時再加載它們。這種方法不僅簡單易用，而且性能較好。

以下是一個使用Intersection Observer實現圖片懶加載的示例代碼：

// 創(chuàng)建一個Intersection Observer實例
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // 當圖片進入視口時加載它
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
});
// 獲取所有需要懶加載的圖片元素，并添加觀察者
const lazyImages = document.querySelectorAll('.lazy');
lazyImages.forEach((lazyImage) => {
  observer.observe(lazyImage);
});

2. 使用scroll事件監(jiān)聽的懶加載：

這種方法是通過監(jiān)聽滾動事件來判斷圖片是否進入視口。當用戶滾動頁面時，檢查每張圖片的位置是否在視口中，如果是，則加載圖片。

以下是一個使用scroll事件監(jiān)聽實現圖片懶加載的示例代碼：

window.addEventListener('scroll', () => {
  const lazyImages = document.querySelectorAll('.lazy');
  lazyImages.forEach((lazyImage) => {
    if (lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) {
      lazyImage.src = lazyImage.dataset.src;
      lazyImage.classList.remove('lazy');
    }
  });
});

3. 使用setTimeout的懶加載：

這種方法是通過設置一個延遲時間來加載圖片。當頁面加載完成后，先加載一張占位圖片，然后使用setTimeout來延遲加載真實圖片，以達到懶加載的效果。

以下是一個使用setTimeout實現圖片懶加載的示例代碼：

window.addEventListener('load', () => {
  const lazyImages = document.querySelectorAll('.lazy');
  lazyImages.forEach((lazyImage) => {
    lazyImage.src = lazyImage.dataset.placeholder;
    setTimeout(() => {
      lazyImage.src = lazyImage.dataset.src;
      lazyImage.classList.remove('lazy');
    }, 1000); // 設置延遲時間，單位為毫秒
  });
});