等待 jquery .each() 循环完成答案

【问题标题】：Waiting for a jquery .each() loop to finish等待 jquery .each() 循环完成
【发布时间】：2012-03-21 15:13:45
【问题描述】：

抱歉，这是一个愚蠢的问题。我正在使用 .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，因为我怀疑 console.log 是在 .each 循环完成之前执行的。那会是正确的吗？我如何绕过它？非常感谢。

【问题讨论】：

$.each 不是异步的，.load 是。
由于图像是异步加载的，您希望如何处理？每次图像完成加载时，您都可以通过在push 之后调用调用来记录数组长度。或者正如罗迪建议的那样，您可以改为进行同步调用。您需要什么行为以及出于什么原因？显然，您希望做的不仅仅是您的问题。
最终我需要加载许多图像，这些图像的数量和大小可能不同，比较所有的宽度和高度以找到两者的上限。我还需要将宽度和高度存储在一个数组中，以便在代码中进一步使用。

标签： jquery arrays each

【解决方案1】：

Load 确实是异步执行的。

您可以使用 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/

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

【讨论】：

感谢您的建议，但我面临的其他问题是这些图像是从另一个域加载的。而且我真的不想涉及使用代理加载图像的问题。再次感谢。
也许 whenSync 插件适合你？ bennadel.com/blog/…

【解决方案2】：

分配一个增加onload的值，然后将该值与下一个循环进行比较。

伪代码：

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

【讨论】：

我会在 .each 循环中进行比较？
你在循环中做增量，并在循环前检查值
对不起。今天完全昏暗了。我理解这个概念，但似乎无法将其融入我的代码的上下文中。这将如何适应 .each .load 循环？
终于整理好了。感谢您的帮助。

【解决方案3】：

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

【讨论】：

K.请问我该如何解决这个问题？
它很快就变得复杂了。加载所有图像时会发生什么？如果只加载一些图像会发生什么？如果没有图像加载会发生什么？您可以添加关闭的计数器，以便每个 load 回调可以增加计数器并检查是否所有图像都已加载。
我明白你的意思。这么简单的事情怎么会这么难。有趣。
@user1001421，另外，有些浏览器即使加载了图片也可能不会触发加载事件（因为它们可能在缓存中）。