jQuery plugin that triggers a callback after all images have been loaded
This test loads images with position: absolute;, and when they are done loading, positions them next to each other based on their width.
Cloning test checks for premature callback execution in WebKit browsers. It it fails, images will be on top of each other in the upper left corner of their holder. This should never happen :) (You can click on cloned holders to remove them.)
// Call imagesLoaded and position images
holder.imagesLoaded(function( $images, $proper, $broken ){
var $container = this,
x = 1;
$images.each( function() {
var $this = $(this).css({ left: x });
x += $this.width() + 1;
});
$container.width(x);
});
There is 10% chance for loading broken images.
As images are being loaded, .progress() method removes loading overlay from proper images, marks broken images as red,
and updates progress bar to represent loading status.
Deferred object is rejected if at least one image in stack is broken.
Clicking on images removes the image and updates the stack info. (Remove broken images to test deferred resolution.)
// Call imagesLoaded with callback and save the deferred object
var dfd = $("#holder").imagesLoaded(function( $images, $proper, $broken ){
totalLabel.text( $images.length );
properLabel.text( $proper.length );
brokenLabel.text( $broken.length );
});
// Deferred magic
dfd.progress(function( isBroken, $images, $proper, $broken ){
var loadingSpan = this.siblings('.loading');
if( isBroken ){
loadingSpan.removeClass('loading').addClass('broken')
} else {
loadingSpan.fadeOut(200, function(){ $(this).remove(); });
}
progressBar.css({ width: Math.round( ( ( $proper.length + $broken.length ) * 100 ) / $images.length ) + '%' });
}).always(function(){
var dfdState = dfd.state();
dfdLabel.addClass( dfdState === 'resolved' ? 'label-success' : 'label-important' ).text( dfdState.toUpperCase() );
progress.hide();
statusBar.show();
progressBar.css({ width: 0 });
});