Clever Geek Handbook

JQuery check if image has loaded before binding .load () event

I have a coverflow plugin for jQuery that needs to adjust to the tallest image from a series of images.

It currently uses an anchor .load()

for each image and configures the plugin after the counter indicates that all images have been loaded. I was told it is unreliable in all browsers.

Typically, most of these images are already loaded into the browser cache, so the binding .load()

takes a lot longer than necessary.

To reduce the overhead, I would like to keep the number of bindings .load()

as low as possible , using only bindings .load()

for images that have not yet been loaded.

How can you tell the difference between images that have already been loaded from images that have not been loaded yet?

+3


source to share


1 answer


Check the complete

image property before binding the event. Example:



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


source






More articles:


All Articles