javascript 在图像对象 jquery 上绑定 onload 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6370179/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
binding onload event on image object jquery
提问by simekadam
Hi I have following code on my site
嗨，我的网站上有以下代码
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";
});;
There is large gallery fo images used as background-images of page wrapper..I need to preload images because of speed (the images are quite large). So I have this code (actually is only a part of bigger function, which wraps caching and so on, but this few lines are fired when image is not in cache)..
有很大的图片库用作页面包装器的背景图像。由于速度原因，我需要预加载图像（图像非常大）。所以我有这个代码（实际上只是更大函数的一部分，它包装了缓存等等，但是当图像不在缓存中时会触发这几行）。
backgroundImages is large array of Image objects, key is the path is the path of image. Every Image obejct has my property "loaded" which says if image has already been loaded, or is currently in state of loading.
backgroundImages 是 Image 对象的大数组，key 是 path 是图像的路径。每个图像对象都有我的属性“已加载”，表示图像是否已加载，或当前处于加载状态。
As you can see from my code I am calling callback function when the image is loaded (there are changes of the background etc.)
正如您从我的代码中看到的，我在加载图像时调用回调函数（背景发生变化等）
But I have a problem with I.E<9..the callback is not successfully fired up (but not everytime)..When I load my page for first it loads properly, but anytime I call this function again, it goes correctly through without errors, but the load event doesn't fired..
但是我有一个问题 IE<9..回调没有成功启动（但不是每次）..当我第一次加载我的页面时它会正确加载，但是每当我再次调用这个函数时，它都会正确地通过而没有错误，但加载事件不会触发..
I really dont know where could be an error, in all browsers except older IEs it works fine..
我真的不知道哪里可能出现错误，在所有浏览器中，除了旧版 IE 之外，它都可以正常工作..
Actually I need to debug if the event is binded correctly, but I can't see it in both IE and Chrome under load item in debugger:(
实际上，如果事件绑定正确，我需要调试，但是在调试器中的加载项下，我在 IE 和 Chrome 中都看不到它:(
Please help I am completely screwed, really dont know what to do..
请帮助我完全搞砸了，真的不知道该怎么办..
回答by simekadam
So few days ago I finally found out a solution to my problem..It seems its matter if I at first bind the onload event and then set the url of Image, or at first set the url and then bind the event.. Example
所以几天前我终于找到了解决我的问题的方法。
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";
First variant runs usually ok, but sometimes it fails (in older IEs)..But the second variant is sure working propely..
第一个变体通常运行正常，但有时会失败（在较旧的 IE 中）。但第二个变体肯定可以正常工作。
回答by Ahsan Rathod
which jQuery API version are you using? Try using the latest version of jQuery.
您使用的是哪个 jQuery API 版本？尝试使用最新版本的 jQuery。
Otherwise use this simple JavaScript code to load images on calling your function on body onload:
否则，使用这个简单的 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...*/);
