Checking out when.js

by davidhong

HTML

<script src="https://raw.github.com/cujojs/when/master/when.js"></script>

JavaScript

var images = [];

(function() {
    var i, l, url, image, loaded;
    loaded = 0;

    for (i = 1, l = 144; i <= l; i += 1) {
        url = i < 10 ? 'http://asdfasdfasdfa.com' : 'http://placehold.it/50x50&text' + i;
        image = createImage(url);
        when(image, report).then(report);

        images.push(image);
    }

    // .all() never gets called if any one of the deferreds fail
    when.all(images).then(function(images) {
        console.log('Loaded ALL images', images);
    });

    // .some(x) gets called if x number of deferred are successful
    when.some(images, 50).then(function(images) {
        console.log('Some images', images);
    });

    // Only save loaded images

    function process(image) {
        return (loaded += 1);
    }

    function report(count) {
        console.info('Currently loaded: ' + count);
    }
}());

function createImage(url) {
    var image = document.createElement('img'),
        deferred = when.defer();

    image.src = url;
    image.addEventListener('load', onLoad, false);
    image.addEventListener('error', onError, false);

    function onLoad() {
        deferred.resolve(image);
    }

    function onError() {
        deferred.reject(image);
    }

    return deferred.promise;
}