使用Intersection Observer API可以高效實(shí)現(xiàn)圖片和iframe的懶加載，顯著提升頁面性能。 1. 使用data-src屬性標(biāo)記需懶加載的元素，避免初始加載；2. 創(chuàng)建Intersection Observer實(shí)例，通過rootMargin設(shè)置預(yù)加載距離，threshold定義觸發(fā)比例；3. 在回調(diào)中檢測元素可見性，將data-src賦值給src以加載內(nèi)容，并停止觀察該元素；4. 可添加CSS過渡實(shí)現(xiàn)平滑淡入效果；5. 對于不支持的瀏覽器，可使用polyfill或回退方案。此方法無需滾動監(jiān)聽，性能優(yōu)越，推薦在現(xiàn)代網(wǎng)頁中廣泛應(yīng)用。

Lazy loading images and iframes can significantly improve page performance by deferring the loading of off-screen content until it's about to enter the viewport. One of the most efficient and modern ways to implement this is using the Intersection Observer API , which eliminates the need for scroll event listeners and getBoundingClientRect() calls that can hurt performance.

Here's how you can use the Intersection Observer API to lazy load images and iframes.

How Intersection Observer Works

Instead of constantly checking an element's position during scroll (which can trigger expensive reflows), the Intersection Observer asynchronously notifies you when an observed element intersects with the viewport (or a container). This makes it ideal for lazy loading.

You define a callback that runs when visibility changes, and configure thresholds (eg, trigger when 10% of the element is visible).

Step 1: Mark Elements for Lazy Loading

Use data-src (or data-srcset for responsive images) to hold the real image or iframe URL. The browser won't load it until you assign it to src .

 <!-- Lazy image -->
<img class="lazy lazy"  src="/static/imghw/default1.png"  data-src="image.jpg"  
  data- 
  alt="A lazy-loaded image"
>

<!-- Lazy iframe -->
<iframe 
  data-src="https://example.com/embed" 
  class="lazy-iframe"
  frameborder="0"
></iframe>

Step 2: Set Up the Intersection Observer

 document.addEventListener("DOMContentLoaded", function () {
  const lazyImages = document.querySelectorAll("img.lazy");
  const lazyIframes = document.querySelectorAll("iframe.lazy-iframe");

  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const element = entry.target;

        if (element.tagName === "IMG") {
          // Handle image
          if (element.dataset.src) {
            element.src = element.dataset.src;
            element.classList.remove("lazy");
            observer.unobserve(element);
          }
        }

        if (element.tagName === "IFRAME") {
          // Handle iframe
          if (element.dataset.src) {
            element.src = element.dataset.src;
            element.classList.remove("lazy-iframe");
            observer.unobserve(element);
          }
        }
      }
    });
  }, {
    rootMargin: "50px", // Start loading 50px before entering viewport
    threshold: 0.01 // Trigger when even 1% is visible
  });

  // Observe all lazy elements
  lazyImages.forEach(img => observer.observe(img));
  lazyIframes.forEach(iframe => observer.observe(iframe));
});

Key Benefits and Tips

• Performance : No scroll event listeners, so no jank.
• rootMargin : Use it to preload content slightly before it appears (eg, 50px ahead).
• Threshold : Lower values (like 0.01 ) mean early triggering; higher values (like 1.0 ) wait until fully in view.
• Remove observer : Once the src is set, unobserve the element to stop tracking.

Optional: Add Placeholder or Fade-In Effect

You can enhance UX by adding a low-quality placeholder or a fade-in transition:

 img.lazy {
  opacity: 0;
  transition: opacity 0.4s;
}

img:not(.lazy) {
  opacity: 1;
}

Now images will smoothly fade in after loading.

Browser Support & Fallback

Most modern browsers support Intersection Observer. For older ones (like IE), consider using a polyfill or fall back to scroll-based detection.

Alternatively, use the native loading="lazy" attribute for images and iframes — but note it doesn't work in all contexts or for dynamic iframes:

 <img src="/static/imghw/default1.png"  data-src="image.jpg"  class="lazy" loading="lazy" alt="與交叉點(diǎn)觀察者API的懶惰加載圖像和iframe">
<iframe src="https://example.com/embed" loading="lazy"></iframe>

However, Intersection Observer gives you more control , especially for complex layouts or when you need to handle custom logic.

Basically, using the Intersection Observer API is a clean, performant way to lazy load media. It's widely supported, easy to implement, and scales well across large pages.

以上是與交叉點(diǎn)觀察者API的懶惰加載圖像和iframe的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！