JQuery异步图像幻灯片预加载

Question

我正在使用JQuery动画框架编写脚本。在这种情况下，我需要有一个不同的动画序列。当一个新的动画开始时，我需要改变页面的背景图像。

动画框架(名为JSTween)提供了以下回调：

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

我正在寻找以下伪代码的JQuery实现：

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
}

我一直在寻找$.when和类似的工具，但我不知道如何正确使用它们。

Answer 1

您应该实现两个类似于$.when的函数。基本上，您需要注册一个在onStart函数的运行时上下文中运行的函数：

var background_callback;

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

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

您的代码编辑后的将是：

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
}