Question

我正在迭代一组图像并在画布上绘制它们。问题是首先从服务器下载图像，所以我需要等到它们完全加载才能尝试绘制它们。听起来很直接，但我无法控制流量。我在下面写了一个示例代码片段来演示：

var drawImages = function(myArray) {
    for (var i = 0; i < myArray.length; i++) {
        console.log("1");
        $(imageObj).on('load', function(){
            //draw image
            console.log("2");
        });
        console.log("3");
    }
}

当我运行此代码时，控制台输出如下：

1
3
2

这是有道理的，因为“2”在图像完全加载后发生。但我需要它顺序发生。

问题似乎是for循环在on.load事件完成之前不关心，然后再继续下一次迭代。因此，如果数组中有多个图像，则输出变为：

1
3
1
3
//image finishes loading...
2

有没有办法停止迭代直到图像加载？或者我是否完全以错误的方式解决这个问题？

Answer 1

如果您的数组包含图像URL，并且您希望在加载图像时绘制图像，那么您所拥有的图像将起作用。只需创建图像元素，并在其上设置侦听器，例如：

var drawImages = function(myArray) {
  var image;

  for (var i = 0; i < myArray.length; i++) {
    image = new Image();
    $('#hidden-loader-div').append(image);
    $(image).on('load', function(){
        //draw image
        console.log("2");
    });
    // Start the loading process
    image.src = myArray[i];
  }
}

只要加载图像，就会触发加载功能。只需确保在某个地方有<div>即可将这些图像粘贴到其中。它不一定是可见的。

使用for循环和on.load事件侦听器进行流控制

1 个答案: