このコードを使用する前に、画像のonloadイベントにいくつかのクロスブラウザの問題があることに注意してください。これらは、jQueryの.load
メソッドのドキュメントで説明されています。
Deferredオブジェクトを作成し、各イメージのonload関数に基づいてパイプする必要があります。
$.when.apply($,$.map(hrefs, function(href) {
var imgLoad = $.Deferred(),
$img = $('<img>').css('height',windowHeight);
ul.append($('<li>').append($img));
$img.load($.proxy(imgLoad.resolve,imgLoad));
$img.attr('src',href);
return imgLoad;
})).done(function(){
// all images are loaded when this executes
})
このコードはjQuery.map
、hrefの配列をDeferredオブジェクトの配列に変換するために使用します。画像をループして追加している間、各画像は独自のDeferredオブジェクトを取得し、そのメソッドは画像のハンドラーに.resolve
バインドされます。.load
画像が読み込まれると、遅延が解決されます。
このDeferredの配列は、への引数として適用されますjQuery.when
。これは、すべての引数が解決されたときに解決されるPromiseを返します。この場合は、すべての画像が読み込まれたことを意味します。.done
次に、そのPromiseにコールバックをアタッチします。