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');
});