jQueryは、画像のロード完了方法の要約を判断する

画像の処理、例えばスライド再生、スケールなどは、すべての画像が完了した後に操作されることに依存する.
今日は、すべてのピクチャのロードが完了したことをどのように判断するかを見てみましょう.ロードが完了する前にloadingのgif図を使用してロード中であることを示すことができます.
一、普通の方法
imgのloadメソッドをリスニングし、loadごとに1枚の画像を比較します.キーコードは次のとおりです.

var num = $img.length;

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

二、jQueryのDeferredオブジェクトを使用する
Deferredオブジェクトは、jQuery 1.5.0バージョンから導入された新しい機能で、詳細は公式ドキュメントを参照してください.
簡単に言えば、DeferredオブジェクトはjQueryのコールバック関数ソリューションであり、時間のかかる操作をどのように処理するかという問題を解決し、それらの操作に対してより良い制御を提供し、統一的なプログラミングインターフェースを提供しています.
チェン一峰にはDeferredの対象を紹介する文章があり、詳しく書かれており、入門に役立つ.
jQueryのdeferredオブジェクトの詳細
ここでは、
deferred.resolve(): Resolve a Deferred object and call any doneCallbacks with the given args. deferred.when(): Provides a way to execute callback functions based on one or more objects, usually Deferred objects that represent asynchronous events. deferred.done(): Add handlers to be called when the Deferred object is resolved.
キーコード:

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

基本的な考え方:
画像resolve()をロードするたびに、when()はすべてのDeferredが完了するとdone()を実行します.
注:なぜなら$whenがサポートするパラメータは$.when(dfd1, dfd2, dfd3, ...),そこでapplyを用いて配列パラメータを受け入れた.
completeは画像がロードされているかどうかを判断します
Googleに感謝します.使いやすい方法を見つけました.簡単な使い方は:

qim=new Image();//      ；
qim.src=$preload;//              ；
if(qim.complete){ $("#cxNfloor").html($filetoload);//qim.complete             
}

それからまた一つの方法を発見しました

$("").load(function(){...});

このうちセレクタはピクチャのidまたはclassであり、functionの中の方法はコールバック関数であり、ピクチャのロードが完了した後に実行されるが、私は多くのことを試験したが、まったくそうではない.正しい解決方法は:

//jquery   
$("#imageId").load(function(){
  alert("    ！");
});

jsを使うのが一番いいという友達がいますが、方法は以下の通りです.

 
  
 document.getElementById("img2").onload=function(){} 
 

ネット上でコードの例を見つけます

function loadImage(url, callback) {
 var img = new Image(); //    Image  ，        
 img.src = url;
 
 if(img.complete) { //               ，        
   callback.call(img);
   return; //     ，     onload  
  }
 img.onload = function () { //           callback  。
    callback.call(img);//      this   Image  
  };
};

以下に、複数のイメージに対するロード判定を示す.

var imgdefereds=[];
$('img').each(function(){
 var dfd=$.Deferred();
 $(this).bind('load',function(){
 dfd.resolve();
 }).bind('error',function(){
 //      ，      
 // dfd.resolve();
 })
 if(this.complete) setTimeout(function(){
 dfd.resolve();
 },1000);
 imgdefereds.push(dfd);
})
$.when.apply(null,imgdefereds).done(function(){
  callback();
});

この方法でwindowを避けることができます.onloadの不足ですが、コードは少し複雑で、性能の面ではwindowより優れています.onloadはかなり強いです.