How to tell if an image is loaded or cached in JQuery?

Question

Seems the .load() function doesn't fire if the image has been cached before. So if you want to make sure one images has loaded before you load and show another (i.e. Magnifier) you can't do something like:

$(img_to_load_first)
    .load(
        $(img_to_load_last)
            .src("2nd.png");
    )
    .src("1st.png");

So how does one ensure loading order in JQuery?

Answer 1

What you'll have to do is handle your load bindings selectively. You can verify load by testing the Image object property complete.

For example:

$('.load_selector').each(function(){

 if (!this.complete) {
  $(this).load(function(){
   // handle image load event binding here
  });
 } else {
  // handle image already loaded case
 }

});

Note that above, this (used alone) refers to the DOM reference to the image object provided by jQuery.

Answer 2

Thanks Sparkey,

I'll give that a try but it looks good. I found a extensive discussion on the topic here: http://www.bennadel.com/blog/1007-jQuery-Attr-Function-Doesn-t-Work-With-IMAGE-complete.htm

which lead me to the "jQuery 'onImagesLoad' Plugin" here: http://includes.cirkuit.net/includes/js/jquery/plugins/onImagesLoad/1.1/documentation/

which seems to solve the issue like so:

$imgs.each(function(i, val){
    $(this).bind('load', function(){
        // ...
    }).each(function(){
        if (this.complete || this.complete === undefined){ this.src = this.src; } //needed for potential cached images
    });
});

Which pretty much boils down to what you said, only his completed check also test for "undefined".