Асинхронно зареждане на изображения в цикъл в 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.

Но не трябва да се отчайвате - решението на проблема е възможно чрез промиси (promises), които ще изучаваме в следващите уроци.