Résumé des méthodes jQuery pour déterminer si l'image est chargée_jquery

Pour le traitement des images, tel que le diaporama, le zoom, etc., tout dépend du fonctionnement une fois que toutes les images sont terminées.

Aujourd'hui, voyons comment déterminer quand toutes les images ont été chargées. Avant que le chargement soit terminé, vous pouvez utiliser l'image gif de chargement pour indiquer qu'elle est en cours de chargement.

1.Méthode ordinaire

Écoutez la méthode de chargement d'img et comparez-la à chaque fois qu'une image est chargée. Le code clé est le suivant :

var num = $img.length;

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

2. Utilisez l'objet différé dans jQuery

L'objet différé est une nouvelle fonctionnalité introduite à partir de la version jQuery 1.5.0. Pour une introduction détaillée, veuillez consulter la documentation officielle.

En termes simples, l'objet Deferred est la solution de fonction de rappel de jQuery. Il résout le problème de la gestion des opérations fastidieuses, offre un meilleur contrôle sur ces opérations et une interface de programmation unifiée.

Ruan Yifeng a un article qui présente les objets différés. Il est écrit plus en détail et est plus utile pour commencer.

Explication détaillée de l'objet différé de jQuery

Ici, nous avons utilisé :

deferred.resolve() : résolvez un objet Deferred et appelez tous les doneCallbacks avec les arguments donnés.
deferred.when() : fournit un moyen d'exécuter des fonctions de rappel basées sur un ou plusieurs objets, généralement des objets différés qui représentent des événements asynchrones.
deferred.done() : ajoutez des gestionnaires à appeler lorsque l'objet différé est résolu.

Code clé :

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

Idée de base :

Chaque fois qu'une image est chargée, solve(), when() exécute done() lorsque tous les différés sont terminés.

Remarque : étant donné que les paramètres pris en charge par $.when sont $.when(dfd1, dfd2, dfd3, ...), nous utilisons apply ici pour accepter les paramètres du tableau.

compléter pour déterminer si l'image est chargée

Grâce à Google, j'ai trouvé une méthode utile. L'utilisation simple est la suivante :

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

Plus tard j'ai découvert une méthode

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

Le sélecteur est l'identifiant ou la classe de l'image, et la méthode dans la fonction est la fonction de rappel, qui est exécutée après le chargement de l'image. Cependant, j'ai beaucoup essayé et ce n'est pas du tout le cas. La bonne solution est :

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

Un ami a dit qu'utiliser js est le meilleur, la méthode est la suivante

Copier le code Le code est le suivant :

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

Trouver un morceau de code en ligne
Exemple

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

Ce qui suit est le jugement de chargement pour plusieurs images.

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

L'utilisation de cette méthode peut éviter les défauts de window.onload, mais le code est légèrement compliqué et ses performances sont bien meilleures que celles de window.onload.