jQuery检查在绑定一个.load（）事件之前图像是否已经加载 [英] jQuery check if image already loaded before binding a .load() event

问题描述

我有一个用于jQuery的封面插件插件，它应该适应一系列图像中最高的图像。

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

通常，大部分图像已经被加载到浏览器缓存中，所以 .load（）绑定被触发了更多的必要。

为了减少开销我想通过仅使用 .load（）绑定到图像上尽可能减少 .load（）绑定的数量尚未加载的

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

解决方案

在绑定事件之前检查图像的完整属性。示例：

  var img = $（'。someImage'）; 
 if（img.prop（'complete'））{
 //已加载
} else {
 img.load（function（）{
 // now它已经加载
}）; 
} 
  

I have a coverflow plug-in for jQuery, which should adjust to the tallest image from a series of images.

Currently it uses a .load() binding on each image and adjusts the plug-in after a counter indicates all images have been loaded. I've been told this isn't reliable on all browsers, though.

Typically, most of these images will already be loaded in the browser cache, so the .load() binding is triggered a lot more than necessary.

In order to reduce the overhead I'd like to reduce the number of .load() bindings as much as possible by only using the .load() binding on images which have not yet been loaded.

How can you distinguish images that have already been loaded from images that have not yet been loaded?

解决方案

Check the complete property of the image before binding the event. Example:

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

这篇关于jQuery检查在绑定一个.load（）事件之前图像是否已经加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！