Image.onload не выполняет весь код

Question

У меня есть этот фрагмент javascript, который берет несколько изображений и ждет их загрузки, а затем выполняет с ними некоторую логику. Это фрагмент кода, который все еще не выполняет ожидаемого:

$(window).on('load', function() {
    var art = new Image();
    var top_image = new Image();
    var bottom_image = new Image();
    var left_image = new Image();
    var right_image = new Image();

    art.onload = function() {
        console.log("1");
        top_image.onload = function() {
            console.log("2");
            bottom_image.onload = function() {
                console.log("3");
                right_image.onload = function() {
                    console.log("4");
                    left_image.onload = function() {
                        console.log("5");
                    }
                }
            }
        }
    }
    art.src = 'images/prototype.jpg';
    top_image.src = 'images/2_4_top_center.png';
    bottom_image.src = 'images/2_4_bottom_center.png';
    right_image.src = 'images/2_4_middle_right.png';
    left_image.src = 'images/2_4_middle_left.png';
});    

Проблема в том, что, когда я сильно перезагружаю браузер, на консоли появляются, казалось бы, случайные числа журналов. В основном он записывает только "1", но иногда доходит до "5". Я не уверен, что здесь происходит и почему он иногда ведет себя так, как ожидалось.

Answer 1

Вы просто добавляете обработчик onclick к top_image когда art уже загружен, поэтому если top_image загружает до artвторой обработчик не будет запущен. Чтобы решить эту проблему, прикрепите обработчики ко всем изображениям, прежде чем устанавливать их источник, и используйте обещания для их обработки:

   const onload = img => new Promise(res => img.onload = res);

  var art = new Image();
  var top_image = new Image();
  var bottom_image = new Image();
  var left_image = new Image();
  var right_image = new Image();

  Promise.all([art, top_image, bottom_image, left_image, right_image].map(onload))
    .then(() => {
       // All loaded !!
    });

  // Add sources