Deferred Image function

function for waiting for images to load

by Richard Hunter

HTML

<script src="https://sp1.yimg.com/ib/th?id=HN.608053063058064409&amp;pid=15.1&amp;w=126&amp;h=161&amp;p=0"></script>
<img id="image" src="https://sp1.yimg.com/ib/th?id=HN.608053063058064409&pid=15.1&w=126&h=161&p=0"/>

<img id="image2" src="https://sp.yimg.com/ib/th?id=HN.607994823303170448&pid=15.1"/>

JavaScript

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

    }).promise();
};

var image = document.querySelector('#image');

$.when(
    deferredImage(document.querySelector('#image')),
    deferredImage(document.querySelector('#image2'))
).then(function(image1, image2) {
    console.log(image1, image2);
})