Preload delle immagini in jQuery: esempio d’uso dei Deferred Object

I Deferred Object sono stati introdotti fin da jQuery 1.5 ma sino a ora l’accoglienza
avuta presso gli sviluppatori è stata piuttosto tiepida. Il motivo risiede nel fatto che non è ben chiaro agli sviluppatori quali sono i casi d’uso reali dei Deferred Object.

Supponiamo di avere uno slideshow gestito da jQuery. Solitamente scriveremmo:

$(function() {
 $('#slideshow').slideshow();
});

In realtà  il DOM e gli eventi associati allo slideshow in genere sono completi quando tutte le immagini sono state caricate. A questo punto
potremmo creare una funzione di utility per questo scopo:

(function($) {
 $.preloadImages = function(images) {
 var imgs = images.split(','),
 len = imgs.length,
 i;
 for( i = 0; i < len; ++i ) {
 var src = imgs[i];
 var img = document.createElement('img');
 img.src = src;
 }
 };
})(jQuery);

Istintivamente modificheremo il codice come segue:

$.preloadImages('image1.jpg,image2.jpg,image3.jpg');
$('#slideshow').slideshow();

Il risultato non sarà  quello sperato, perché le due azioni non sono sincronizzate tra loro. Quindi possiamo usare i Deferred Object:

$.when($.preloadImages('image1.jpg,image2.jpg,image3.jpg')).
done(function() {
 $('#slideshow').slideshow();
 });

Ora le due azioni sono sincronizzate, perché la seconda avrà  luogo solo dopo che la prima è stata completata. Ho usato con successo questo
approccio anche per il preload di video HTML5 in questa pagina.