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';
});

问题在于，当我重新加载浏览器时，控制台中会出现一个看似随机的数字日志。它主要只记录＆＃34; 1＆＃34;但有时会一直到日志记录＆＃34; 5＆＃34;。我不确定这里发生了什么以及为什么它有时只表现出预期的行为。

Answer 1

当top_image已加载时，您只需向art附加一个onclick处理程序，因此如果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没有执行所有代码

1 个答案: