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

当 art 已经加载时，您只需将 onclick 处理程序附加到 top_image，因此如果 top_image 在 art 之前加载，则不会触发第二个处理程序。要解决此问题，请在设置图像源之前将处理程序附加到所有图像，并使用 promises 来处理它们：

   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

Image.onload 没有执行所有代码

Image.onload not executing all code

javascript

onload