imagesLoaded
HTML
<script src="http://www.kylehouston.com/Rb7102k/imagesloaded/js/jquery.imagesloaded.js"></script>
<div id="ccontainer">
<div class="set set1">
<h2>Set 1</h2>
<img src="http://26.media.tumblr.com/tumblr_lo7izpkVSJ1qcdfs3o1_250.jpg">
<img src="http://28.media.tumblr.com/tumblr_lnqquri96C1qcdfs3o1_250.jpg">
<img src="http://26.media.tumblr.com/tumblr_lo7izpkVSJ1qcdfs3o1_250.jpg">
<img src="http://28.media.tumblr.com/tumblr_lnqquri96C1qcdfs3o1_250.jpg">
<img src="http://27.media.tumblr.com/tumblr_lo7izpkVSJ1qcdfs3o1_250.jpg">
<img src="http://28.media.tumblr.com/tumblr_lnqquri96C1qcdfs3o1_250.jpg">
<img src="http://30.media.tumblr.com/tumblr_lo7izpkVSJ1qcdfs3o1_250.jpg">
<img src="http://28.media.tumblr.com/tumblr_lnqquri96C1qcdfs3o1_250.jpg">
<img src="http://25.media.tumblr.com/tumblr_lo7izpkVSJ1qcdfs3o1_250.jpg">
<img src="http://28.media.tumblr.com/tumblr_lnqquri96C1qcdfs3o1_250.jpg">
<img src="http://26.media.tumblr.com/tumblr_lo7izpkVSJ1qcdfs3o1_250.jpg">
<img src="http://28.media.tumblr.com/tumblr_lnqquri96C1qcdfs3o1_250.jpg">
<img src="http://26.media.tumblr.com/tumblr_lo7izpkVSJ1qcdfs3o1_250.jpg">
<img src="http://28.media.tumblr.com/tumblr_lnqquri96C1qcdfs3o1_250.jpg">
<img src="http://26.media.tumblr.com/tumblr_lo7izpkVSJ1qcdfs3o1_250.jpg">
<img src="http://28.media.tumblr.com/tumblr_lnqquri96C1qcdfs3o1_250.jpg">
<img src="http://26.media.tumblr.com/tumblr_lo7izpkVSJ1qcdfs3o1_250.jpg">
<img src="http://22.media.tumblr.com/tumblr_lnqquri96C1qcdfs3o1_250.jpg">
<img src="http://26.media.tumblr.com/tumblr_lo7izpkVSJ1qcdfs3o1_250.jpg">
<img src="http://28.media.tumblr.com/tumblr_lnqquri96C1qcdfs3o1_250.jpg">
</div>
<div class="set set2">
<h2>Set 2</h2>
<img src="http://28.media.tumblr.com/tumblr_lmddmmNCAl1qcdfs3o1_250.jpg">
<img...
CSS
img {
display: block;
float: left;
margin: 5px;
}
h2 {
clear: both;
font-size: 22px;
text-transform: uppercase;
margin: 40px 0 40px 5px;
}
JavaScript
$(function () {
function loadImages(selector) {
var dfd = $.Deferred();
/*
...do work to load images...
if success, dfd.resolve()/dfd.resolveWith(...)
if failure, dfd.reject()/dfd.rejectWith(...)
to indicate progress, dfd.notify()/dfd.notifyWith(...)
*/
$(selector).imagesLoaded(function () {
var setResult = "dummy data";
dfd.resolve(setResult);
});
/*
If you return the dfd directly,
it can be canceled via .reject() from the outside.
To allow outside canceling just return the dfd.
*/
return dfd.promise();
}
//Run multiple deferreds in parallel and wait for all to complete with $.when
$.when(loadImages('.set1'), loadImages('.set2'), loadImages('.set3'))
.done(function(set1Result, set2Result, set3Result) {
//All resolved
})
.fail(function() {
//One or more failed
//If you want to know which one,
//you have to save a reference to each of
//the loadImages calls and determine through
//their individual .failure()'s
});
});