Carga asíncrona de imágenes en un bucle en JavaScript
Supongamos que las rutas de las imágenes se almacenan en un array:
let arr = ['img1.png', 'img2.png', 'img3.png'];
Podemos cargar estas imágenes en un bucle:
for (let path of arr) {
loadImage(path, function(image, err) {
document.body.append(image);
});
}
El código resultó hermoso y sin callback hell, sin embargo, volvimos a nuestros dos problemas: el orden de las imágenes no está garantizado y es imposible detectar el momento en que se cargan todas las imágenes.
Y no hay solución en esta situación: es imposible ejecutar un bucle, usar una función asíncrona dentro de él, y luego detectar el momento de finalización de todas las funciones del bucle. O no necesitas detectar ese momento y el código anterior te servirá, o bien te damos la bienvenida al callback hell.
Pero no te desanimes - la solución al problema es posible mediante promesas, que estudiaremos en las siguientes lecciones.
