jQuery: preload delle immagini con i Deferred Object

Con jQuery possiamo implementare il preload delle immagini con i Deferred Object.

La soluzione è la seguente:

"use strict";

var preload = function( images ) {
    var def = $.Deferred();
    var count = 0;
    var total = images.length;

    for( var i = 0; i < total; i++ ) {
       var src = images[i];
       var img = new Image( src );
       img.onload = function() {
          if( this.complete ) {
              count++;
          }
       };
    }
    if( count === total ) {
        def.resolve();
    }
    return def.promise();
};

Esempio d'uso:

"use strict";

$(function() {
    preload( [ "1.jpg", "2.jpg", "3.jpg" ] ).then(function() {
        //...
    });
});