IntersectionObserver în JavaScript

const obs = new IntersectionObserver((intrari) => { ... }, { threshold: 0.5 });
obs.observe(element)
obs.unobserve(element)
obs.disconnect()

Ce face IntersectionObserver

Funcția primește o listă de intrări; fiecare are target (elementul), isIntersecting (dacă este vizibil) și intersectionRatio (cât din el se vede). Este mult mai eficient decât verificarea poziției la fiecare derulare.

Opțiuni: threshold (de la ce procent se anunță: 0 = un pixel, 1 = tot elementul), rootMargin (zonă extinsă, de exemplu "200px" ca să încarci din timp), root (alt container decât fereastra). observe adaugă un element, unobserve îl scoate, disconnect le oprește pe toate.

Parametri

Parametru	Descriere
functie	Primește (intrari, observator).
optiuni	Opțional. root, rootMargin, threshold.

Ce returnează

Un observator.

Exemple

Exemplul 1: Imagini încărcate doar când apar pe ecran

Rezultatul după derularea până la primele două imagini.

const obs = new IntersectionObserver((intrari, observator) => {
  for (const intrare of intrari) {
    if (!intrare.isIntersecting) continue;
    const img = intrare.target;
    img.src = img.dataset.src;
    observator.unobserve(img);
    console.log("încărcat", img.dataset.src);
  }
}, { rootMargin: "200px" });

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

Rezultat în browser

încărcat poza1.jpg
încărcat poza2.jpg

Greșeli frecvente

• Uiți unobserve după ce ai încărcat imaginea. Funcția rulează din nou la fiecare intrare și ieșire din ecran.

Comenzi înrudite

• getBoundingClientRect / elementFromPoint: Returnează poziția și mărimea unui element pe ecran; elementFromPoint face invers, din coordonate în element.
• ResizeObserver: Anunță când un element își schimbă mărimea, indiferent de cauză (fereastră, conținut, CSS).
• MutationObserver: Anunță modificările din DOM: elemente adăugate sau șterse, atribute schimbate, text modificat.