jQuery 在绑定(bind) .load() 事件之前检查图像是否已加载

Question

我有一个 jQuery 的 coverflow 插件，它应该调整为一系列图像中最高的图像。

目前它使用 .load()绑定(bind)每个图像，并在计数器指示所有图像已加载后调整插件。不过，我被告知这在所有浏览器上并不可靠。

通常，这些图像中的大部分已加载到浏览器缓存中，因此 .load()绑定(bind)的触发次数超出了必要的次数。

为了减少开销，我想减少 .load() 的数量仅使用 .load() 尽可能多地进行绑定(bind)绑定(bind)尚未加载的图像。

如何区分已加载的图像和尚未加载的图像？

Answer 1

在绑定(bind)事件之前检查图像的complete属性。示例:

var img = $('.someImage');
if (img.prop('complete')) {
  // already loaded
} else {
  img.load(function(){
    // now it has loaded
  });
}