Caricamento asincrono di immagini in JavaScript

Le immagini che vengono create dinamicamente tramite JavaScript vengono anche caricate in modo asincrono. Consideriamo il seguente codice come esempio:

javascriptlet image = document.createElement('img');
image.src = 'img.png';
document.body.appendChild(image);

Come puoi vedere, qui creiamo un tag img, impostiamo nel suo src il percorso dell'immagine e posizioniamo questa immagine nel body. Tuttavia, l'immagine non apparirà immediatamente sulla pagina. Il fatto è che quando impostiamo in src il percorso dell'immagine, il browser inizia a scaricare questa immagine dal sito. Solo quando l'immagine sarà scaricata, il browser potrà mostrarla.

Se l'immagine è abbastanza grande e la velocità di internet è abbastanza lenta, l'utente del sito potrà "ammirare" per un po' un'immagine vuota - finché non viene caricata.

In realtà, il tag img possiede un evento load, che si attiva al termine del caricamento dell'immagine:

javascriptlet image = document.createElement('img');
image.src = 'img.png';

image.addEventListener('load', function() {
  // si attiva al caricamento dell'immagine
});

Possiamo usarlo per posizionare l'immagine sulla pagina solo quando questa immagine sarà caricata:

javascriptlet image = document.createElement('img');
image.src = 'img.png';

image.addEventListener('load', function() {
  document.body.appendChild(image); // posizioniamo al caricamento
});

L'immagine potrebbe non caricarsi: potrebbe accadere che il percorso dell'immagine sia errato, o che ci sia un'interruzione di internet, un guasto al server del sito o qualcosa di simile. In altre parole - una situazione eccezionale. In questo caso, non si attiverà l'evento load, ma l'evento error:

javascriptlet image = document.createElement('img');
image.src = 'img.png';

image.addEventListener('load', function() {
  document.body.appendChild(image);
});
image.addEventListener('error', function() {
  // errore di caricamento dell'immagine
});