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 () {
var def1 = $.Deferred();
var def2 = $.Deferred();
var def3 = $.Deferred();
var def = $.when(def1, def2, def3);
$('.set1').imagesLoaded(function () {
console.log('Set 1 ready');
def1.resolve();
});
$('.set2').imagesLoaded(function () {
console.log('Set 2 ready');
def2.resolve();
});
$('.set3').imagesLoaded(function () {
console.log('Set 3 ready');
def3.resolve();
});
def.done(function () {
console.log('ready');
});
});