IntersectionObserver Builder

v1.0.0

Visual root, rootMargin, and threshold builder — paste config and see callbacks fire.

Use case

Threshold (0-1)

rootMargin

IntersectionObserver Code

// Lazy load images
const imageObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (!entry.isIntersecting) return;
    const img = entry.target as HTMLImageElement;
    img.src = img.dataset.src!;
    img.classList.add("loaded");
    imageObserver.unobserve(img);
  });
}, { rootMargin: "0px 0px -50px 0px", threshold: 0.1 });

document.querySelectorAll("img[data-src]").forEach(img => imageObserver.observe(img));

// HTML: <img data-src="/actual.jpg" src="/placeholder.svg" class="lazy" alt="..." />