Проблема 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 hell - ад коллбэков.

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