Asincronía de carga de imágenes en JavaScript

Las imágenes que se crean dinámicamente a través de JavaScript también se cargan de forma asíncrona. Consideremos el siguiente código como ejemplo:

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

Como puedes ver, aquí creamos una etiqueta img, escribimos en su src la ruta de la imagen y colocamos esta imagen en body. Sin embargo, la imagen no aparecerá en la página inmediatamente. El hecho es que cuando escribimos en src la ruta de la imagen, el navegador comienza a descargar esta imagen del sitio. Solo cuando la imagen se haya descargado, el navegador podrá mostrarla.

Si la imagen es suficientemente grande y la velocidad de internet es suficientemente baja, el usuario del sitio podrá "disfrutar" de una imagen vacía por algún tiempo, hasta que se cargue.

En realidad, la etiqueta img tiene un evento load que se activa al finalizar la carga de la imagen:

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

image.addEventListener('load', function() {
	// se activará cuando la imagen se cargue
});

Podemos usar esto para colocar la imagen en la página solo cuando esta imagen se haya cargado:

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

image.addEventListener('load', function() {
	document.body.appendChild(image); // colocamos cuando se cargue
});

La imagen no necesariamente se cargará: puede suceder que la ruta de la imagen sea incorrecta, o ocurra una interrupción de internet, una falla del servidor del sitio o algo similar. En otras palabras - una situación excepcional. En este caso, no se activará el evento load, sino el evento error:

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

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	// error de carga de la imagen
});

Crea un botón que, al hacer clic, cargue una imagen. Muestra la imagen cuando esté cargada. Muestra un mensaje en caso de problemas con la carga de la imagen.