jQuery Deferred Example

HTML

<img data-backup-image="https://github.com/CoffeeAndCode/blog/raw/master/loading-images-with-jquery-deferreds/heart-half.gif"
    data-image="https://github.com/CoffeeAndCode/blog/raw/master/loading-images-with-jquery-deferreds/heart-full.gif"
    height="45" width="45" />

JavaScript

function preloadImage(image) {
    var $deferred = $.Deferred();

    // create a new image to attempt loading the requested image
    var img = new Image();
    var self = this;

    img.onload = function() {
        $deferred.resolveWith(self, [img.src]);
    }

    img.onerror = function() {
        $deferred.rejectWith(self, [img.src]);
    }

    $deferred.fail(function() {
        console.log('image failed to load: ' + img.src);
    });

    img.src = image;
    return $deferred.promise();
}

function loadImage($image) {
    var promise = preloadImage($image.attr('data-image'));

    promise.done(function(image) {
        $image.attr('src', image);
    });

    promise.fail(function() {
        promise = preloadImage($image.attr('data-backup-image'));
        promise.done(function(image) {
            $image.attr('src', image);
        });
    });
}

loadImage($('img'));