Chargement asynchrone d'images en JavaScript

Les images qui sont créées dynamiquement via JavaScript sont également chargées de manière asynchrone. Prenons l'exemple du code suivant :

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

Comme vous le voyez, ici nous créons une balise img, écrivons dans son src le chemin vers l'image et plaçons cette image dans le body. Cependant, l'image n'apparaîtra pas immédiatement sur la page. Le fait est que lorsque nous avons écrit dans src le chemin vers l'image - le navigateur commence à télécharger cette image depuis le site. Ce n'est que lorsque l'image sera téléchargée que le navigateur pourra l'afficher.

Si l'image est assez grande, et que la vitesse Internet est assez faible, alors l'utilisateur du site pourra pendant un certain temps "admirer" une image vide - jusqu'à ce qu'elle soit chargée.

En fait, la balise img possède un événement load, qui se déclenche à la fin du chargement de l'image :

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

image.addEventListener('load', function() {
	// se déclenche au chargement de l'image
});

Nous pouvons l'utiliser pour placer l'image sur la page uniquement lorsque cette image sera chargée :

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

image.addEventListener('load', function() {
	document.body.appendChild(image); // on place au chargement
});

L'image ne se chargera pas nécessairement : il peut arriver que le chemin vers l'image soit incorrect, ou qu'il y ait une coupure d'Internet, une panne du serveur du site ou quelque chose de similaire. En d'autres termes - une situation exceptionnelle. Dans ce cas, ce n'est pas l'événement load qui se déclenchera, mais l'événement error :

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

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	// erreur de chargement de l'image
});

Créez un bouton, en cliquant sur lequel une image sera chargée. Affichez l'image lorsqu'elle sera chargée. Affichez un message en cas de problèmes avec le chargement de l'image.