Intersection Observer Lazy Load

IntersectionObserver detects when a card enters the viewport and swaps a placeholder into loaded content.

Program

IntersectionObserver watches visibility without scroll polling. It is commonly used for lazy loading images or sections.

intersection_observer_lazy.html

<article id="card" data-state="placeholder">Loading chart...</article>
<script>
  const cardEl = document.querySelector("#card");
  const observer = new IntersectionObserver(entries => {
    if (!entries[0].isIntersecting) return;
    cardEl.dataset.state = "loaded";
    cardEl.textContent = "Chart loaded";
    observer.disconnect();
  });
  observer.observe(cardEl);
</script>

IntersectionObserver IntersectionObserver reports when a target enters or leaves a viewport or root element.

lazy loading Lazy loading waits to load or render content until it is likely needed.