Проблема callback hell в JavaScript

Да предположим, че искаме да заредим три изображения с помощта на функцията loadImage:

loadImage('img1.png', function(image, err) {
	document.body.append(image);
});
loadImage('img2.png', function(image, err) {
	document.body.append(image);
});
loadImage('img3.png', function(image, err) {
	document.body.append(image);
});

С този код има нещо нередно. Работата е там, че изображенията ще бъдат добавени в body докато се зареждат. Тоест никой не гарантира на нас, че изображенията ще бъдат добавени именно в реда, от който се нуждаем.

Има още нещо. Да предположим, че искаме да направим нещо, когато всички три изображения са заредени. В нашия код просто няма да можем да уловим този момент, тъй като всички три изображения се зареждат независимо.

Добре, нека преработим кода:

loadImage('img1.png', function(image1, err1) {
	document.body.append(image1);
	
	loadImage('img2.png', function(image2, err2) {
		document.body.append(image2);
		
		loadImage('img3.png', function(image3, err3) {
			document.body.append(image3);
			console.log('всички изображения са заредени');
		});
	});
});

Решихме и двата описани проблема. Обаче, получихме в замяна друг. Все още не е много видим, но представете си как ще изглежда нашият код, ако в него има зареждане не на три, а, да кажем, десет изображения, плюс ще бъде добавена обработка на изключения. В резултат кодът ще стане изключително нечетим: сложността на кода лавинообразно нараства при влагане на callback функции една в друга. Такава ситуация се нарича callback hell - адът на callback функциите.

Пренапишете дадения код така, че в него да има зареждане на 10 изображения плюс обработка на изключения. Уверете се, че получавате ситуация на callback hell.