jQuery check if image already loaded before binding a .load() event [duplicate]

Question

I have a coverflow plug-in for jQuery, which should adjust to the tallest image from a series of images.

Currently it uses a .load() binding on each image and adjusts the plug-in after a counter indicates all images have been loaded. I've been told this isn't reliable on all browsers, though.

Typically, most of these images will already be loaded in the browser cache, so the .load() binding is triggered a lot more than necessary.

In order to reduce the overhead I'd like to reduce the number of .load() bindings as much as possible by only using the .load() binding on images which have not yet been loaded.

How can you distinguish images that have already been loaded from images that have not yet been loaded?

Answer 1

Check the complete property of the image before binding the event. Example:

var img = $('.someImage');
if (img.prop('complete')) {
  // already loaded
} else {
  img.load(function(){
    // now it has loaded
  });
}