在 jQuery 中的图像对象上绑定 onload 事件

Question

我的网站上有以下代码：

 backgroundImages[bg_img_path_b]=new Image();
 backgroundImages[bg_img_path_b].src =     bg_img_path_b;
 backgroundImages[bg_img_path_b].loaded="loading";
 //jQuery(backgroundImages[lastImage]).unbind('load.backgroundImages');                                         

 jQuery(backgroundImages[bg_img_path_b]).bind('load.backgroundImages',function(){
      if(typeof callback=='function'){
           callback.call(this, bg_img_path_b);
           if(showLoading) hideLoadingDC();
      }
 }).bind('load.cache', function(){
                            backgroundImages[bg_img_path_b].loaded="true";
                        });;

有一个大型图像库，用于用作页面包装器的背景图像。由于速度原因，我需要预加载图像（图像很大）。所以我有这段代码（实际上只是更大函数的一部分，它包装了缓存等，但是当图像不在缓存中时会触发这几行）。

backgroundImages 是 Image 对象的大数组，关键是路径是图像的路径。每个 Image 对象都有我的属性“loaded”，它表示图像是否已经加载，或者当前处于加载状态。

正如你从我的代码中看到的，我在加载图像时调用回调函数（背景发生变化等）

但是我在 IE<9 上有问题，回调没有成功启动（但不是每次） ..当我第一次加载页面时，它会正确加载，但是每当我再次调用此函数时，它都会正确地通过，没有错误，但加载事件不会触发。.

我真的不知道哪里可能出现错误，在除旧版 IE 之外的所有浏览器中，它都可以正常工作。

实际上我需要调试事件是否正确绑定，但我在 IE 和 Chrome 中的调试器加载项下都看不到它:(

请帮助我完全搞砸了，真的不知道该怎么办。

Answer 1

几天前，我终于找到了解决问题的方法。似乎我是先绑定onload事件，然后设置Image的url，还是先设置url，然后绑定事件，这很重要。
示例

var photo = new Image();
photo.url = "http://www.something.com/something.jpg";
$(photo).bind('load',doSomething());


var photo = new Image();
$(photo).bind('load',doSomething());
photo.url = "http://www.something.com/something.jpg";

第一个变体通常运行正常，但有时会失败（在较旧的 IE 中）..但第二个变体肯定可以正常工作..

Answer 2

您使用的是哪个 jQuery API 版本？尝试使用最新版本的 jQuery。

否则，请使用以下简单的 JavaScript 代码在 body onload 上调用函数时加载图像：

var myimages = new Array();
var path = "images/gallery/";

function preloadimages() {
    for (i = 0; i < preloadimages.arguments.length; i++) {
        myimages[i]=new Image();
        myimages[i].src=path+preloadimages.arguments[i];
    }
}

// Enter name of images to be preloaded inside parenthesis with douable quotes. 
// Extend list as desired with comma.
preloadimages("gImg1.jpg","gImg2.jpg","gImg3.jpg","gImg4.jpg" /*, etc...*/);