jQuery: usare i Deferred Objects per il preload delle immagini

I Deferred Objects di jQuery hanno introdotto il concetto di esecuzione differita del codice a partire dalla versione 1.5 della libreria. Un uso interessante di questa caratteristica riguarda il preload delle immagini.

Possiamo creare un oggetto che fungerà da cache per l'URL dell'immagine ed una funzione di utility che utilizza i Deferred Objects ed i loro metodi per il preload dell'immagine:

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];
}

Esempio d'uso:

loadImage('http://my/image.jpg').then(function(url) {
  alert(url + ' è caricata');
});