JavaScript Academy · Lezione

Caricamento differito delle immagini

Carichi le immagini solo quando diventano visibili.

Caricamento differito delle immagini è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

L'idea del lazy loading

Il lazy loading rimanda il download delle immagini finché non stanno per entrare nell'area visibile durante lo scorrimento. In questo modo risparmia larghezza di banda e velocizza il caricamento iniziale della pagina, soprattutto per le pagine lunghe e ricche di immagini.

Memorizzare l'URL reale

Il trucco consiste nel non inserire inizialmente l'URL reale dell'immagine in src. Lo memorizzi in un attributo data-src, così il browser non lo scarica subito.

// Markup pattern:
// <img data-src="photo-large.jpg" alt="Scenery">
// The browser will not fetch anything until we set src.

Selezionare le immagini lazy

Raccolga tutte le immagini che richiedono il lazy loading. Una convenzione comune consiste nell'usare una classe condivisa oppure la presenza di data-src.

const lazyImages = document.querySelectorAll('img[data-src]');
console.log('found', lazyImages.length, 'lazy images');

Creare l'observer

Crei un observer il cui callback carichi l'immagine reale non appena questa interseca la viewport. Utilizzi rootMargin per iniziare il caricamento dell'immagine poco prima che compaia.

const observer = new IntersectionObserver((entries, obs) => {
  // handle entries here
}, { rootMargin: '100px' });

Caricare all'intersezione

Quando un'immagine interseca la viewport, copi il suo data-src in src. A quel punto il browser la scarica e la visualizza.

const observer = new IntersectionObserver((entries, obs) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // triggers the download
    }
  });
}, { rootMargin: '100px' });

Smettere di osservare dopo il caricamento

Una volta caricata, un'immagine non deve più essere osservata. Chiami unobserve per liberare risorse e impedire nuove attivazioni.

if (entry.isIntersecting) {
  const img = entry.target;
  img.src = img.dataset.src;
  obs.unobserve(img); // done watching this one
}

Avviare l'osservazione

Scorra tutte le immagini lazy e inizi a osservarle. L'observer gestirà il resto mentre l'utente scorre la pagina.

lazyImages.forEach(img => observer.observe(img));

Mostrare un segnaposto

Offra un'esperienza fluida mostrando un piccolo segnaposto sfocato o un colore uniforme mentre l'immagine reale viene caricata, quindi la faccia comparire con una dissolvenza nell'evento load dell'immagine.

img.addEventListener('load', () => {
  img.classList.add('loaded'); // CSS can fade it in
});
img.src = img.dataset.src;

L'attributo nativo loading

I browser moderni supportano anche il lazy loading nativo tramite loading="lazy" su img e iframe. Intersection Observer resta utile per il controllo personalizzato, le animazioni o il comportamento di fallback.

// Native approach (no JS needed):
// <img src="photo.jpg" loading="lazy" alt="...">

// Observer approach gives more control and effects.

Ripulire data-src

Dopo il caricamento, può rimuovere l'attributo data-src per mantenere ordinato il DOM ed evitare confusione nel codice o nelle query successive.

img.src = img.dataset.src;
img.removeAttribute('data-src');
obs.unobserve(img);

Il pattern completo

Il lazy loading con Intersection Observer è un pattern ordinato ed efficiente: memorizzare gli URL in data-src, osservare ogni immagine, sostituire l'URL con quello reale all'intersezione e infine smettere di osservarla. Il risultato è una pagina più veloce, che carica le immagini appena prima che servano.

Verifica rapida

Verifichi la Sua comprensione del lazy loading delle immagini.

Riepilogo

Ha realizzato il caricamento lazy delle immagini:

Memorizzi l'URL reale in data-src.
Osservi ogni immagine con un Intersection Observer.
All'intersezione, copi data-src in src e chiami unobserve.
Utilizzi rootMargin per precaricare l'immagine appena prima che entri nell'area visibile.
loading="lazy" nativo è un'alternativa più semplice.

Ora implementeremo lo scorrimento infinito.

Domande Frequenti

La lezione «Caricamento differito delle immagini» è gratuita?

Sì — il testo completo di «Caricamento differito delle immagini» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Caricamento differito delle immagini»?

Carichi le immagini solo quando diventano visibili. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Caricamento differito delle immagini»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy