jQuery onload event for images

When you want to perform some action when images finish to load, you may be surprised sometimes as onload event is not called when image is already cached.

To make it work for all images you simply need also to check this.complete and this.readyState.

Here’s example for jQuery:

jQuery.fn.whenLoaded = function(fn){
  return this.each(function(){
    // if already loaded call callback
    if (this.complete || this.readyState == 'complete'){
      fn.call(this);
    } else { // otherwise bind onload event
      $(this).load(fn);
    }
  });
}

$('img').whenLoaded(function(){
  console.log(this.src + ' loaded');
});
  1. by sobstel • September 2010 • blog archive