Intersection Observer & Efficient Scroll Handling

How can Intersection Observer be used to implement efficient lazy loading of iframes?

const iframeObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const iframe = entry.target;
      iframe.src = iframe.dataset.src;
      iframe.removeAttribute('data-src');
      iframeObserver.unobserve(iframe);
    }
  });
}, {
  rootMargin: '50% 0px'
});

Load all iframes immediately
Use setTimeout for delayed loading
Load iframes only when they become visible
Intersection Observer provides an efficient way to implement iframe lazy loading by: 1) Only loading iframe content when it comes into view, reducing initial page load time and memory usage, 2) Using rootMargin to preload iframes before they're visible, creating a smoother experience, 3) Unobserving iframes after loading to optimize performance, 4) Managing resources efficiently by preventing unnecessary iframe loads. The code demonstrates this pattern using data-src attributes to store the actual source URL until loading is needed.
Preload all iframe content

Next Question (11/20)