Chargement asynchrone d'images dans une boucle en JavaScript
Supposons que les chemins vers les images soient stockés dans un tableau :
let arr = ['img1.png', 'img2.png', 'img3.png'];
Nous pouvons charger ces images dans une boucle :
for (let path of arr) {
loadImage(path, function(image, err) {
document.body.append(image);
});
}
Le code résultant est élégant et sans callback hell, cependant, nous sommes revenus à nos deux problèmes : l'ordre des images n'est pas garanti et il est impossible de capturer le moment où toutes les images sont chargées.
Et il n'y a pas de solution dans cette situation : il est impossible de lancer une boucle, d'utiliser une fonction asynchrone à l'intérieur, puis de capturer le moment où toutes les fonctions de la boucle sont terminées. Soit vous n'avez pas besoin de capturer ce moment et le code ci-dessus vous conviendra, soit bienvenue dans le callback hell.
Mais il ne faut pas se décourager - une solution au problème est possible via les promesses, que nous étudierons dans les prochaines leçons.
