javascript - Binding onload event on image object in jQuery - Stack Overflow

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.

• javascript
• jquery
• onload
• jquery-events

Share Improve this question Follow edited Jun 5, 2020 at 15:35 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jun 16, 2011 at 10:06 simekadamsimekadam 7,3841111 gold badges5959 silver badges8080 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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./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