Асинхронная загрузка картинок в цикле в JavaScript

Пусть пути к картинкам хранятся в массиве:

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

Мы можем загрузить эти картинки в цикле:

for (let path of arr) {
	loadImage(path, function(image, err) {
		document.body.append(image);
	});
}

Код получился красивый и без callback hell, однако, мы вернулись к двум нашим проблемам: порядок картинок не гарантирован и невозможно поймать момент загрузки всех картинок.

И решения в данной ситуации нет: невозможно запустить цикл, использовать внутри него асинхронную функцию, а потом поймать момент завершения всех функций цикла. Либо вам не нужно ловить этот момент и приведенный выше код вам подойдет либо добро пожаловать в callback hell.

Но, расстраиваться не стоит - решение проблемы возможно через промисы, которые мы будем изучать в следующих уроках.