1

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

我将我的代码基于stackoverflow帖子等待图像加载后再继续

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 解析以返回状态结果：

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

我没想到我上面的代码可以工作，这更像是对我自己的一个示范，我可以把一些东西传回去。

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

4

2 回答 2

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'));

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

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

另外，请记住，只有在成功解决所有承诺对象时才会触发.done handlerof 。.when()

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

于 2013-02-26T11:54:38.957 回答
0 
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);
        });
    });
}
于 2018-04-29T13:07:57.207 回答