JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/desandro/imagesloaded/master/jquery.imagesloaded.min.js"></script>
<img src="http://l.yimg.com/g/images/soup_hero_adrian.jpg.v1">
<img src="http://cdn.conservativebyte.com/wp-content/uploads/2012/07/Obama764.jpg">
<img src="http://modernsurvivalonline.com/wp-content/uploads/2012/01/Barack-Obama-7.png">
<img src="http://atlantablackstar.com/wp-content/uploads/2012/05/President-Obama.jpg">
<img src="http://images.politico.com/global/2012/09/120908_obama_podium_ap_605.jpg">
JavaScript
(function($) {
$.whenArray = function(array){
return jQuery.when.apply(this, array);
};
$.fn.fetchDimensions = function(){
var promises = [],
dimensions = [],
deferred = $.Deferred(),
checkDimensions = function(i, el, promise){
console.log(el.width, el.height);
if(el.width !== 0 && el.height !== 0){
promise.resolve();
dimensions[i] = { 'width' : el.width, 'height' : el.height };
} else {
setTimeout(function(){
checkDimensions(i, el, promise);
}, 10);
}
};
this.each(function(i){
var promise = $.Deferred();
checkDimensions(i, this, promise);
promises.push(promise);
});
$.whenArray(promises).done(function(){
deferred.resolve(dimensions);
});
return deferred.promise();
};
})(jQuery);
var images = $('img'), start = Date.now();
images.imagesLoaded(function(){
console.log('load', Date.now() - start);
});
images.fetchDimensions().done(function(dimensions){
console.log('fetch', Date.now() - start, dimensions);
});