Javascript Image.onload未执行所有代码

我有一段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”。我不知道这里发生了什么，也不知道为什么它有时只会表现得像预期的那样

当

art

已经加载时，您只需将onclick处理程序附加到

top\u image

，因此如果

top\u 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

---

设置

src

时，不能保证按照指定的顺序加载图像。