admin管理员组文章数量:1319488
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 for 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 object has my property "loaded" which says if image has already been loaded, or is currently in state of loading.
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 every time)..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..
I really don't know where could be an error, in all browsers except older IEs it works fine..
Actually I need to debug if the event is bound correctly, but I can't see it in both IE and Chrome under load item in debugger:(
Please help I am pletely screwed, really don't know what to do.
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 for 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 object has my property "loaded" which says if image has already been loaded, or is currently in state of loading.
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 every time)..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..
I really don't know where could be an error, in all browsers except older IEs it works fine..
Actually I need to debug if the event is bound correctly, but I can't see it in both IE and Chrome under load item in debugger:(
Please help I am pletely screwed, really don't know what to do.
Share Improve this question edited Jun 5, 2020 at 15:35 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Jun 16, 2011 at 10:06 simekadamsimekadam 7,38411 gold badges59 silver badges80 bronze badges 2-
Older IE and Opera (if I remember well) is known not to trigger
onload
when the image is loaded from the browser's cache. That would explain your experience of "for first time, works, from then on, does not work". – kapa Commented Jun 16, 2011 at 10:22 - Actually i have wrong expressed me..i meant when calling the function 2nd times..no matter if image is in cache.. – simekadam Commented Jun 16, 2011 at 10:49
2 Answers
Reset to default 4So 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./something.jpg";
$(photo).bind('load',doSomething());
var photo = new Image();
$(photo).bind('load',doSomething());
photo.url = "http://www.something./something.jpg";
First variant runs usually ok, but sometimes it fails (in older IEs)..But the second variant is sure working propely..
which jQuery API version are you using? Try using the latest version of jQuery.
Otherwise use this simple JavaScript code to load images on calling your function on 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 ma.
preloadimages("gImg1.jpg","gImg2.jpg","gImg3.jpg","gImg4.jpg" /*, etc...*/);
本文标签: javascriptBinding onload event on image object in jQueryStack Overflow
版权声明:本文标题:javascript - Binding onload event on image object in jQuery - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742059461a2418492.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论