Chargement asynchrone d'images dans une boucle en JavaScript

Supposons que les chemins vers les images soient stockés dans un tableau :

javascriptlet arr = ['img1.png', 'img2.png', 'img3.png'];

Nous pouvons charger ces images dans une boucle :

javascriptfor (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.