Carregamento assíncrono de imagens em loop em JavaScript
Suponha que os caminhos para as imagens estejam armazenados em um array:
let arr = ['img1.png', 'img2.png', 'img3.png'];
Podemos carregar essas imagens em um loop:
for (let path of arr) {
loadImage(path, function(image, err) {
document.body.append(image);
});
}
O código ficou bonito e sem callback hell, no entanto, voltamos aos nossos dois problemas: a ordem das imagens não é garantida e é impossível detectar o momento em que todas as imagens foram carregadas.
E não há solução para esta situação: é impossível iniciar um loop, usar uma função assíncrona dentro dele, e depois detectar o momento de conclusão de todas as funções do loop. Ou você não precisa detectar esse momento e o código acima serve para você, ou bem-vindo ao callback hell.
Mas não se desanime - a solução para o problema é possível através de Promises, que estudaremos nas próximas lições.
