Award-Winning Fjords Thomas Reynolds

jQuery.Deferred Image Preloader

A little wrapper around jQuery.Deferred for an image preloader.

var loadImageCache = {}
var loadImage = function(imageSrc) {
  if (typeof loadImageCache[imageSrc] === "undefined") {
    deferred = $.Deferred();

    preloader         = new Image();
    preloader.onload  = function() { deferred.resolve(this.src) };
    preloader.onerror = function() { deferred.reject(this.src)  };
    preloader.src     = imageSrc;

    loadImageCache[imageSrc] = deferred;
  }

  return loadImageCache[imageSrc];
}

Requires jQuery 1.5 or newer:

loadImage("http://my/image.jpg").then(function(url) {
  alert(url + ' is preloaded');
});

The code will only preload each url once, you can reuse the deferred object and add additional then callbacks to that object anywhere in your code.