Question

对不起，如果这是一个愚蠢的问题。我正在使用.each循环遍历一组图像并对每个图像进行内存加载以找到它的真实宽度和高度。然后使用这些数字填充数组。问题是我想等到循环完成才能继续我的任务。这是我的代码：

 $.each(items, function(){
     $('<img/>').attr('src', $(this).attr('src')).load(function(){
          myArray.push(this.width);
          myArray.push(this.height);
     });
 });
 console.log(myArray.length);

控制台始终记录0，因为我怀疑在.each循环完成之前正在执行console.log。这是对的吗？我该如何绕过它呢？非常感谢。

Answer 1

加载确实是异步执行的。

您可以使用JQuery Ajax方法，这样您就可以将调用设置为同步，例如（未经测试，只是出于我的想法）：

jQuery.ajax({
     url:    'http://url-to-img',
     success: function(result) {
                 myArray.push(this.width);
                 myArray.push(this.height);
              },
     async:   false
});

应该做的伎俩。查看JQuery站点的Jquery ajax参考文档以获取更多信息：http://api.jquery.com/jQuery.ajax/

请注意，您不能使用同步跨域调用。

Answer 2

load^docs是异步调用的。您的每个循环都已完成，但图像未完成加载

Answer 3

指定一个递增onload的值，然后将该值与下一个循环进行比较。

伪代码：

i=0;
if(i<images){
load image here
image.onload = i++;
}

等待jquery .each（）循环完成

3 个答案: