deferred image function

by Richard Hunter

HTML

//based on http://blog.anderson.geek.nz/2011/07/25/loading-images-with-jquery-deferreds/

<img id="image1" src="https://sp1.yimg.com/ib/th?id=HN.608053063058064409&pid=15.1&w=126&h=161&p=0"/>
<img id="image2" src="http://www.legendsofairpower.com/images/Earhart.gif"/>
<img id="image3" src="http://www.feministezine.com/feminist/historical/images/Amelia-Earhart-04.jpg"/>

JavaScript

var image1 = document.querySelector('#image1');
var image2 = document.querySelector('#image2');
var image3 = document.querySelector('#image3');

var imageDeferred = function (image) {
    return $.Deferred(function (task) {
        if(image.complete) { task.resolve(image); }
        image.onload = function () { task.resolve(image); }
        image.onerror = function () { task.reject(); }
    }).promise();
};

$.when(imageDeferred(image1),
       imageDeferred(image2),
       imageDeferred(image3)).then(function(img1, img2, img3) {

        console.log(img1, img2, img3);

});