画像がloaded_jqueryであるかどうかを判断するためのjQueryメソッドの概要

スライドショーやズームなどの画像処理は、すべての画像が完成してから操作する必要があります。

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

1. 通常の方法

img のロードメソッドをリッスンし、画像がロードされるたびに比較します。キーコードは次のとおりです:

var num = $img.length;

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

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

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

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

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

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

ここでは、次のものを使用しました:

deferred.resolve(): Deferred オブジェクトを解決し、指定された引数で DoneCallback を呼び出します。
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');
});

基本的な考え方:

画像がロードされるたびに、resolve()、すべての Deferred が完了したときに when() が Done() を実行します。

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

画像がロードされているかどうかの判断が完了しました

Google のおかげで、便利な方法を見つけました。簡単な使用法は次のとおりです。

qim=new Image();//新建一个图片；
qim.src=$preload;//图片地址是你准备要加载的地址；
if(qim.complete){ $("#cxNfloor").html($filetoload);//qim.complete表示这个图片是否加载完毕了
}

後で私はある方法を発見しました

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

セレクターは画像のIDまたはクラスであり、関数内のメソッドは画像がロードされた後に実行されるコールバック関数です。しかし、私はたくさん試しましたが、まったく当てはまりません。正しい解決策は次のとおりです:

//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 よりもはるかに優れています。