Binding onload event on image object in jQuery

Question

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 completely screwed, really don't know what to do.

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
– 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
– simekadam, Commented Jun 16, 2011 at 10:49

simekadam · Accepted Answer · 2011-07-05 09:25:17Z

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

answered Jul 5, 2011 at 9:25

simekadam

7,40411 gold badges61 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nicolas Zozol Over a year ago

The first variant may fail because sometimes loading is done before going to the third line. The second variant is in my opinion better.

Matteo B. Over a year ago

Shouldn't it be .src instead of .url?

Bojangles · Accepted Answer · 2013-08-08 15:26:44Z

0

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 comma.
preloadimages("gImg1.jpg","gImg2.jpg","gImg3.jpg","gImg4.jpg" /*, etc...*/);

edited Aug 8, 2013 at 15:26

Bojangles

102k50 gold badges175 silver badges209 bronze badges

answered Jun 16, 2011 at 11:00

Ahsan Rathod

5,5252 gold badges23 silver badges26 bronze badges

5 Comments

simekadam Over a year ago

I am not sure it would help..I need to download images ondemand, not all at once.. Here is link to the site..designclub.cz try to open it in IE<9 and go through links in top menu..

Ahsan Rathod Over a year ago

This script is just to load all images.

simekadam Over a year ago

Yes, I see, but I am only fetching 1 image ahead

Ahsan Rathod Over a year ago

This script is just to load all images and cached. You can call each image by using this: function showImage(strImage) { var imgPath = "images/gallery/" + strImage, true; document.getElementById("imgHover").style.background = imgPath ; } and onclik event you can call like this : javascript:showImage('gImg11.jpg');

Ahsan Rathod Over a year ago

Sima: I've created an example for you with this script. Click the link to view it: designworks.com.pk/example/background --- Thanks!

Collectives™ on Stack Overflow

Binding onload event on image object in jQuery

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related