一、什麼是 Lazy Loading？為什麼重要？

Lazy Loading（延遲載入）指的是：
👉 當元素即將進入畫面時，才開始載入資源

與傳統方式相比：

  • ❌ 一進頁面就載入所有圖片 / 影片
  • ✅ 滾動到哪裡才載入哪裡

這在以下情境特別重要：

  • 一頁式網站（圖片很多）
  • 電商商品列表
  • 作品集 / 攝影網站

好處：

  • 首屏載入速度大幅提升
  • 減少不必要的流量浪費
  • 提升 SEO（Core Web Vitals）

 

二、最簡單做法：原生 Lazy Loading

現代瀏覽器已經支援圖片與 iframe 的 Lazy Loading，只需要一行屬性：

<img src="image.jpg" loading="lazy" alt="example">

 

影片（iframe，例如 YouTube）：

<iframe src="https://www.youtube.com/embed/xxx" loading="lazy"></iframe>

優點：

  • 不需寫 JavaScript
  • 實作超簡單
  • 瀏覽器自動最佳化

👉 適合：大多數網站直接使用

 

三、進階做法：Intersection Observer 控制載入

如果你需要更精細控制（例如動畫、預載距離），可以使用 IntersectionObserver：

const images = document.querySelectorAll("img[data-src]");

const observer = new IntersectionObserver((entries, obs) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      obs.unobserve(img);
    }
  });
});

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

 

HTML：

<img data-src="image.jpg" alt="lazy image">

優點：

  • 可控制「提前載入」距離
  • 可搭配淡入動畫
  • 更彈性

 

四、影片 Lazy Loading 的最佳實務

影片比圖片更吃效能，因此更適合做 Lazy Loading。

建議做法：

1. 使用縮圖 + 點擊載入

<div class="video">
  <img src="thumbnail.jpg" alt="video">
</div>

點擊後再插入 iframe：

div.addEventListener("click", () => {
  div.innerHTML = `<iframe src="https://www.youtube.com/embed/xxx" allowfullscreen></iframe>`;
});

👉 好處：

  • 初始完全不載入影片
  • 節省大量資源

 

五、實戰優化技巧（開發必看）

除了基本 Lazy Loading，還可以進一步優化：

1. 設定圖片尺寸（避免跳動）

<img src="..." width="400" height="300">

2. 搭配 CSS 淡入效果

img {
  opacity: 0;
  transition: opacity 0.3s;
}
img.loaded {
  opacity: 1;
}

3. 預載關鍵圖片（不要全部 lazy）

<link rel="preload" as="image" href="hero.jpg">

👉 首屏圖片（Hero Image）不要 Lazy！