Zusammenfassung der jQuery-Methoden zur Bestimmung, ob das Bild geladen ist_jquery

Bei der Bildbearbeitung wie Diashow, Zoom usw. ist die Bedienung erst nach Fertigstellung aller Bilder erforderlich.

Sehen wir uns heute an, wie Sie feststellen können, wann alle Bilder geladen wurden. Bevor der Ladevorgang abgeschlossen ist, können Sie das Lade-GIF-Bild verwenden, um anzuzeigen, dass es geladen wird.

1. Gewöhnliche Methode

Hören Sie sich die Lademethode von img an und vergleichen Sie sie jedes Mal, wenn ein Bild geladen wird. Der Schlüsselcode lautet wie folgt:

var num = $img.length;

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

2. Verwenden Sie das Deferred-Objekt in jQuery

Deferred Object ist eine neue Funktion, die ab der jQuery-Version 1.5.0 eingeführt wurde. Eine detaillierte Einführung finden Sie in der offiziellen Dokumentation.

Einfach ausgedrückt ist das Deferred-Objekt die Callback-Funktionslösung von jQuery. Es löst das Problem der Handhabung zeitaufwändiger Vorgänge, bietet eine bessere Kontrolle über diese Vorgänge und eine einheitliche Programmierschnittstelle.

Ruan Yifeng hat einen Artikel, der verzögerte Objekte vorstellt. Er ist ausführlicher geschrieben und für den Einstieg nützlicher.

Detaillierte Erläuterung des verzögerten Objekts von jQuery

Hier haben wir verwendet:

deferred.resolve(): Ein verzögertes Objekt auflösen und alle doneCallbacks mit den angegebenen Argumenten aufrufen.
deferred.when(): Bietet eine Möglichkeit, Rückruffunktionen basierend auf einem oder mehreren Objekten auszuführen, normalerweise verzögerte Objekte, die asynchrone Ereignisse darstellen.
deferred.done(): Handler hinzufügen, die aufgerufen werden sollen, wenn das Deferred-Objekt aufgelöst wird.

Schlüsselcode:

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

Grundidee:

Jedes Mal, wenn ein Bild geladen wird, wird „resolve()“ ausgeführt. when() führt „done()“ aus, wenn alle verzögerten Prozesse abgeschlossen sind.

Hinweis: Da die von $.when unterstützten Parameter $.when(dfd1, dfd2, dfd3, ...) sind, verwenden wir hier apply, um Array-Parameter zu akzeptieren.

Ausführen, um festzustellen, ob das Bild geladen ist

Dank Google habe ich eine nützliche Methode gefunden:

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

Später habe ich eine Methode entdeckt

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

Der Selektor ist die ID oder Klasse des Bildes, und die Methode in der Funktion ist die Rückruffunktion, die nach dem Laden des Bildes ausgeführt wird. Ich habe jedoch viel versucht, aber das ist überhaupt nicht der Fall. Die richtige Lösung ist:

//jquery的方式
$("#imageId").load(function(){
  alert("加载完成！");
});

Ein Freund sagte, dass die Verwendung von js das Beste sei, die Methode sei wie folgt

Code kopieren Der Code lautet wie folgt:

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

Suchen Sie einen Code online
Beispiel

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对象
  };
};

Das Folgende ist die Ladebeurteilung für mehrere Bilder.

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

Durch die Verwendung dieser Methode können die Mängel von window.onload vermieden werden, der Code ist jedoch etwas kompliziert und seine Leistung ist viel besser als die von window.onload.