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

问题

This question already has an answer here:

Using image.complete to find if image is cached on chrome? (1 answer)

Closed 5 years ago.

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?

回答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
  });
}

来源：https://stackoverflow.com/questions/26980962/jquery-check-if-image-already-loaded-before-binding-a-load-event