Question

我正在开发一个闪存卡网页，我想知道预加载的图像何时加载或遇到错误。一旦我获得了每张图片的状态，我就会采取一些行动。

我的代码基于stackoverflow帖子Wait for image to be loaded before going on

function loadSprite(src) {
    var deferred = $.Deferred();
    var sprite = new Image();
    sprite.onload = function() {
        deferred.resolve();
    };
    sprite.src = src;
    return deferred.promise();
}

和加载精灵的函数

var loaders = [];
loaders.push(loadSprite('1.png'));
loaders.push(loadSprite('2.png'));
loaders.push(loadSprite('3.png'));
$.when.apply(null, loaders).done(function() {
// callback when everything was loaded
});

我修改了loadSprite resolve以返回状态结果：

deferred.resolve("STATUS RESULT");

和何时

$.when.apply(null, loaders).done(function("STATUS RESULT") {
  // callback when everything was loaded
  //Do something with "STATUS RESULT"
});

问题在于我无法为loaders.push(loadSprite(file to load));的每次调用分离出“状态结果”。这就是每次调用loadSprite

时我只返回一个变量而不是一个

我没想到我的上述代码能够正常工作，这更像是对我自己的证明，我可以传回一些东西。

我无法解决这个问题，感谢所有的帮助。谢谢，

Answer 1

实际上，它按预期工作。您可以稍微调整创建者方法，例如

function loadSprite( src ) {
    return $.Deferred(function( promise ) {
        var sprite = new Image();

        sprite.onload = promise.resolve.bind( null, "status result" );
        sprite.src = src;
    }).promise();
}

现在，当您将一些承诺对象推送到数组并在其上应用.when()时

loaders.push(loadSprite('1.png'));
loaders.push(loadSprite('2.png'));
loaders.push(loadSprite('3.png'));

每个status result将在.done()处理程序的 arguments 对象中列出。所以

$.when.apply(null, loaders).done(function() {
    console.log( arguments[ 0 ] ); // status result
    console.log( arguments[ 1 ] ); // status result
    // etc
});

此外，请注意.done handler的{{1}}只会仅触发所有承诺对象已解决成功< /强>

这反过来意味着，如果您的某个图片由于某种原因无法加载，则其承诺将永远不会达到.when()状态，因此，您的resolved处理程序将永远不会触发。

Answer 2

function function_1()
{
    // Async part example
    var call = $.ajax({
        //....
    });
    call.then(handelSuccess);

    var df = $.Deferred();
    function handelSuccess(data, status, jqXHR) {
        //some code
        df.resolve(data);
    }

    return df;
}

这是如何接收数据的一种方法：

function main()
{
    var df = function_1();
    $.when(df).done(function () {
        df.promise().then(function (data) {
            console.log(data);
        });
    });
}

使用延迟resolve（）和when（）时传递参数

2 个答案: