jQuery はすべての画像がロードされたと判断します_html/css_WEB-ITnose

スライド ショー、ズームなどの画像処理の場合、すべての操作はすべての画像が完了することに依存します。

今日は、すべての画像が読み込まれたことを判断する方法を見てみましょう。読み込みが完了する前に、読み込み中であることを示すために読み込み gif 画像を使用できます。

1. 通常の方法

img のロード方法を監視し、画像がロードされるたびに比較します。キーコードは次のとおりです:

var num = $img.length; $imgs.load(function() { num--; if (num > 0) { return; } console.log('load compeleted'); } 

2. jQuery で Deferred オブジェクトを使用する

Deferred オブジェクトは、jQuery 1.5.0 バージョンから導入された新機能です。詳細については、公式ドキュメントを参照してください。

簡単に言えば、Deferred オブジェクトは、時間のかかる操作を処理する方法の問題を解決し、それらの操作をより適切に制御し、統一されたプログラミング インターフェイスを提供します。

Deferred オブジェクトを紹介する記事が Ruan Yifeng にあり、より詳しく書かれており、入門に役立ちます。

jQueryのdeferredオブジェクトの詳しい説明

ここでは以下を使用します:

deferred.resolve(): Deferredオブジェクトを解決し、指定された引数でdoneCallbacksを呼び出します。

deferred.when(): コールバックを実行する方法を提供します。 1 つ以上のオブジェクト (通常、非同期イベントを表す Deferred オブジェクト) に基づく関数。

deferred.done(): Deferred オブジェクトが解決されたときに呼び出されるハンドラーを追加します。

キー コード:

var defereds = [];$imgs.each(function() { var dfd = $.Deferred(); $(this).load(dfd.resolve); defereds.push(dfd); }); $.when.apply(null, defereds).done(function() { console.log('load compeleted'); }); 

基本的な考え方:
画像がロードされるたびに、すべての Deferred が完了すると、resolve() と when() が Done() を実行します。

注: $.when でサポートされているパラメータは $.when(dfd1, dfd2, dfd3, ...) であるため、ここでは apply を使用して配列パラメータを受け入れます。