JavaScript

Caricamento progressivo con IntersectionObserver

Attiva animazioni o caricamenti quando un elemento entra nell'area visibile.

Quando si usa

Quando vuoi rinviare immagini, iframe, grafici o effetti fino al momento in cui l'utente si avvicina al contenuto.

Perché si usa

IntersectionObserver è più efficiente dell'ascolto continuo dell'evento scroll e consente di ridurre il lavoro iniziale della pagina.

Vantaggi principali

Soluzione riutilizzabile e adattabile
Codice privo di dipendenze esterne
Struttura commentabile e integrabile nel progetto

Anteprima del risultato

Il caricamento progressivo mostra o carica gli elementi solo quando entrano nell'area visibile della pagina.

Elemento già visibile

Elemento caricato quando appare

Altro elemento progressivo

Codice completo

Studia il flusso prima di copiarlo e provalo in un ambiente separato. Adatta sempre nomi, selettori, percorsi e controlli al progetto reale.

<img class="lazy" data-src="foto-grande.webp" src="anteprima-leggera.webp" alt="Descrizione">
<script>
const osservatore=new IntersectionObserver((voci,observer)=>{
  voci.forEach(voce=>{
    if(!voce.isIntersecting)return;
    const elemento=voce.target;
    elemento.src=elemento.dataset.src;
    elemento.removeAttribute('data-src');
    observer.unobserve(elemento);
  });
},{rootMargin:'200px 0px'});
document.querySelectorAll('.lazy[data-src]').forEach(el=>osservatore.observe(el));
</script>

Da personalizzare: Margine di anticipo, selettore degli elementi e comportamento dopo il caricamento.

Errore da evitare: Mantieni sempre un src iniziale valido e un testo alt; JavaScript non deve rendere invisibile un contenuto essenziale.