Load image using deferred object

Load image at once using deferred object.

by FiNGAHOLiC

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<button>Get large image!</button>

JavaScript

// http://msdn.microsoft.com/en-us/scriptjunkie/gg723713

$.createCache = function(requestFunction){
    var cache = {};
    return function(key, callback){
        if(!cache[key]){
            cache[key] = $.Deferred(function(defer){
                requestFunction(defer, key);
            }).promise();
        };
        return cache[key].done(callback);
    };
};

$.loadImage = $.createCache(function(defer, url){
    var image = new Image();
    var cleanUp = function(){
        image.onload = image.onerror = null;
    };
    defer.then(cleanUp, cleanUp);
    image.onload = function(){
        defer.resolve(url);
    };
    image.onerror = defer.reject;
    image.src = url;
});

$(function(){
    
    var $button = $('button');
    
    $button.on('click', function(){
        $.loadImage('http://www.okinawanet.info/images/0225.jpg').done(function(){
            console.log('load one!');
        });
    });

});