Pré-chargement du diaporama d'images asynchrones JQuery

Question

J'écris un script en utilisant un framework d'animation JQuery. Dans ce scénario, j'ai besoin d'une séquence d'animations différentes. Quand une nouvelle animation commence, j'ai besoin de changer l'image d'arrière-plan de la page.

Le cadre d'animation (il est appelé JSTween) fournit les callbacks suivants:

onStart: function() {}, 
onStop: function() {} 

Je suis à la recherche d'une mise en œuvre JQuery pour le pseudo-code suivant:

onStart: function() { 
    load new background; 
} 

onStop: function() { 
    // This animation has ended, about four seconds have passed 
    on new background loaded: { 
     // Change background 
    } 

    // Start new animation async 
} 

J'ai cherché $.when et des outils similaires, mais je ne peux pas comprendre comment les utiliser correctement.

Answer 1

Vous devez implémenter quelques fonctions qui s'apparentent à $.when. Fondamentalement, vous enregistrez une fonction qui est exécuté dans le contexte d'exécution de la fonction onStart:

var background_callback; 

var loadNewBackground = function() { 
    background_callback(); 
} 

var onBackgroundLoaded = function (callback) { 
    background_callback = callback; 
} 

Votre code édité sera:

onStart: function() { 
    // load new background; 
    loadNewBackground(); 
} 

onStop: function() { 
    // This animation has ended, about four seconds have passed 
    onBackgroundLoaded(function() { 
     // Change background 
    }); 

    // Start new animation async 
}