Intersection Observer 實現(xiàn)懶加載的關(guān)鍵在於延遲加載非首屏內(nèi)容，從而提升性能。 1. 基本用法是通過創(chuàng)建觀察器監(jiān)聽圖片元素，當其接近視口時設置src 並停止觀察；2. 可擴展至組件或內(nèi)容塊，如滾動到底部觸發(fā)數(shù)據(jù)加載；3. 需考慮兼容性，使用特性檢測並提供降級方案或polyfill。掌握這些要點可有效優(yōu)化頁面加載體驗。

用JavaScript 的Intersection Observer 實現(xiàn)懶加載，其實並不復雜，但很多人一開始總覺得有點繞。簡單說，它的核心思路就是：不一開始就加載所有圖片或內(nèi)容，等用戶快看到它們時再加載。這樣可以提升頁面加載速度、減少資源浪費。

下面從幾個實用角度講講怎麼用Intersection Observer 做懶加載，以及一些容易忽略的細節(jié)。

1. 基本用法：監(jiān)聽圖片進入視口

Intersection Observer 的基本邏輯是創(chuàng)建一個觀察器，然後讓它去“盯”某個元素。當這個元素出現(xiàn)在可視區(qū)域（或者接近可視區(qū)域）時，執(zhí)行指定操作。

舉個例子：你想讓圖片在用戶快滾動到它的時候才加載。

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

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute("data-src");
      observer.unobserve(img); // 加載完就不再觀察}
  });
}, {
  rootMargin: "0px 0px 200px 0px" // 提前加載下方200px的圖片});

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

這裡的關(guān)鍵點：

• 使用data-src存儲真實圖片地址，先不賦值src
• 設置rootMargin可以提前觸發(fā)加載，避免用戶看到空白
• 用完unobserve是為了性能考慮，防止持續(xù)監(jiān)聽已加載的圖片

2. 懶加載不只是圖片，還能用於組件或內(nèi)容塊

雖然最常見的場景是圖片懶加載，但其實你可以用Intersection Observer 來控制任何DOM 元素的加載時機，比如視頻、廣告位、甚至是一些複雜的UI 組件。

例如，你有一組動態(tài)生成的卡片列表，想讓用戶滾動到底部附近時才加載下一批數(shù)據(jù)：

 const trigger = document.querySelector(".load-more-trigger");

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadMoreData(); // 自定義加載函數(shù)observer.unobserve(trigger); // 加載一次後停止監(jiān)聽}
  });
});

observer.observe(trigger);

這種方式的好處是：

• 不需要頻繁監(jiān)聽scroll事件，性能更優(yōu)
• 更容易控制加載節(jié)奏，適合無限滾動類頁面

3. 注意兼容性和fallback 方案

Intersection Observer 在現(xiàn)代瀏覽器中支持得不錯，但在一些老舊環(huán)境中（比如IE）可能無法使用。這時候你需要考慮：

• 是否提供降級方案，比如直接加載圖片
• 或者引入polyfill（官方有提供）

如果你對兼容性要求不高，可以放心使用；如果必須兼容舊設備，建議加一層檢測：

 if ("IntersectionObserver" in window) {
  // 正常使用Intersection Observer
} else {
  // 直接加載所有圖片const images = document.querySelectorAll("img[data-src]");
  images.forEach(img => {
    img.src = img.dataset.src;
  });
}

另外，有些網(wǎng)站會結(jié)合JS 懶加載noscript 標籤來保證即使JS 被禁用，也能顯示圖片，這也是個值得參考的做法。

基本上就這些。 Intersection Observer 是一個非常實用的API，掌握之後你會發(fā)現(xiàn)懶加載變得很輕鬆。關(guān)鍵是要理解它的工作機制，並根據(jù)實際需求設置合適的選項，比如rootMargin和是否重複觀察。這些小細節(jié)做對了，用戶體驗和性能都能兼顧。

以上是利用JavaScript交叉點觀察者進行懶惰加載的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！