javascript - 我的图像已完成加载，但其高度和宽度尚未更新。这什么时候发生？

Question

我正在使用一个jQuery 插件，一旦页面上的所有图像都已加载，它就会调用回调。它检查imageObject.complete属性并将处理程序绑定到load和error事件以确定何时完成图像加载。

这很好用，但我遇到的问题是，即使图像被认为已加载，但当我检查图像或其包含元素的height和属性时，尺寸尚未更新。widthdiv

这是一个例子：

http://jsfiddle.net/RtnVx/12/

在尝试访问其和尺寸之前，如何确保包含元素已调整大小以适合图像？heightwidth

编辑 1：我清理并注释了我的 jsfiddle 中的代码，以使示例更易于理解。

编辑2：必须存在基于缓存的竞争条件或变化，因为当我从另一台机器运行代码时，它可以正常工作（即，正确计算上边距），这实际上不好，因为它不一致。这种不一致在 Chrome、FWIW 中更为明显。

另外，需要明确的是，目标不是init每次加载图像时都调用；相反，init应该在通过 AJAX 调用加载所有图像后调用一次load。

Answer 1

答案：http: //jsfiddle.net/morrison/RtnVx/30/

batchImageLoad在图像加载完成之前，您不需要调用。我在加载的图像上创建了一个事件。

更新说明：

• 我删掉了你的 jQuery 插件。它过于复杂，我没有完全理解。
• 我当前的解决方案通过使用事件来提供错误处理error，插件也是如此。
• 解决过程：
  • 查找所有img's 的下降#slides并将该长度存储在一个.data()属性中，以及一个变量以保持已加载的数量。
  • 在每个上绑定一个load和error事件，img以更新加载图像的计数。
  • 如果加载/错误图像的计数达到总图像计数，则调用setTimeout()直到所有图像的宽度都大于零，然后触发init()。