2016-09-09 4 views
1

問題をロードする前に発射:画像プリローダーのコールバックのすべての画像が

私はプリロードイメージをやろうとしていると私はadapt.Iに試してみましたthis awesome solutionがコードを取り、どの機能に包みました約束を返しますが、done()ハンドラがと呼ばれる前に、の画像がすべて読み込まれているのに気付いたのですが、何が間違っていますか?

コード:

function preload(args) { 

    var $defer = $.Deferred(); 
    var preload = args; 
    var promises = []; 
    for (var i = 0; i < preload.length; i++) { 
    (function(url, promise) { 
     var img = new Image(); 
     img.onload = function() { 
     promise.resolve(); 
     console.log("loaded:" + url); 
     }; 
     console.log("loading:" + url); 
     img.src = url; 
    })(preload[i], promises[i] = $.Deferred()); 
    } 
    $.when.apply($, promises).done(function() { 
    console.log("All images ready sir!"); 
    $defer.resolve(); 
    }); 

    return $defer; 
} 

var images = ['https://pbs.twimg.com/media/CbM1w65UcAAKfSJ.jpg', 'https://www.kenrockwell.com/nikon/d600/sample-images/600_0985.JPG', 'https://developer.nvidia.com/sites/default/files/akamai/gameworks/blog/GameWorks_Vulkan_and_OpenGL_Samples/vulkan2.png', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKJ1fJHxLQ6unFkHZnHJoT-RfqrBvWMrzhmRFAPUt0VvdvZSDd', 'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTyvamruO8NCTeQJXtQaXM8xEQS5P9ANh_npfgZpv-7x8ISvzX5zg']; 

preload(images).done(function() { 
    console.log("OK, begin business process.."); 

}); 

コンソール出力:

enter image description here

JSFIDDLE:

https://jsfiddle.net/sajjansarkar/f5k94n2r/

+2

これは、約束を解決した後に「読み込まれた」メッセージを記録するためです。 – bumpy

+0

Arrghh ..ありがとうございました。 –

答えて

2

スワップこれらの2行は

promise.resolve(); 
    console.log("loaded:" + url); 

約束は解決チェーンの残りの部分をトリガする解決されます。その後、ログメッセージが追加されます。

関連する問題