1

フラッシュカードのWebページを開発していますが、プリロードされた画像がいつロードされたか、エラーが発生したかを知りたいです。各画像のステータスを取得したら、いくつかのアクションを実行します。

私は自分のコードを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)); つまり、の呼び出しごとに1つではなく、1つの変数しか返されません。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();
}

ここで、いくつかのpromise オブジェクトを配列にプッシュして適用.when()すると、

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

each 、ハンドラーからの引数オブ​​ジェクトstatus resultにリストされます。そう.done()

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

また、すべてのpromise オブジェクトが正常に解決された場合にのみ.done handler、 ofが起動することに注意してください。.when()

つまり、何らかの理由で画像の 1 つが読み込まれなかった場合、その promise は決してresolved状態に到達しないため、.when()ハンドラーは起動しません。

于 2013-02-26T11:54:38.957 に答える