Problèmes d'échec de chargement d'image dans jQuery-js tutoriel-php.cn

Problèmes d'échec de chargement d'image dans jQuery

亚连

Libérer： 2018-06-23 16:52:44

original

2081 Les gens l'ont consulté

Cet article présente principalement le résumé des méthodes d'échec de chargement d'image jQuery pour remplacer l'image par défaut, et les connaissances pertinentes utilisées : la méthode ready de jquery, $("img").error(), l'attribut complet d'img, le plug-in imagesLoaded , et la délégation d'événements. , les méthodes de capture d'événements et de préchargement d'images, etc. Les amis qui en ont besoin peuvent s'y référer

Cet article traite principalement de plusieurs façons de remplacer l'image par défaut après l'échec du chargement de l'image sur la page

Le point clé est le suivant : cela doit être le cas. N'oubliez pas que les événements d'erreur ne bouillonnent pas.

Points de connaissances associés : la méthode ready de jquery, $("img").error(), l'attribut complet de img, le plug-in imagesLoaded, la délégation d'événements, les méthodes de capture d'événements et de préchargement d'images, etc.

1. Si l'image ne parvient pas à se charger, remplacez-la par l'image par défaut

1.1 Liez l'événement d'erreur à l'image

L'événement d'erreur sera déclenché lorsque l'image ne parvient pas à se charger

$("img").on("error", function () {
  $(this).attr("src", "../img/img.jpg");
});

Copier après la connexion

L'attribut d'événement onerror n'est pas recommandé, vous savez~O.o
S'il est dynamique Pour les photos ajoutées, cet événement doit être re-lié. La délégation d'événements peut être utilisée pour des choses comme les événements de clic, mais la délégation d'événements est effectuée en utilisant l'idée du bouillonnement d'événements, et les événements d'erreur ne prennent pas en charge le bouillonnement
Il n'est pas recommandé de l'utiliser dans la méthode ready. Liez l'événement d'erreur à img. Peut-être que lorsque img ne parvient pas à charger l'image, img ne lie pas l'événement d'erreur, ce qui empêchera son remplacement par l'image par défaut

1.2 Utiliser l'attribut complet pour juger

Lorsque le chargement de l'image échoue, la valeur de l'attribut complet est fausse, et lorsque l'image est chargée avec succès, elle est vraie

$("img").each(function () {

  if (!this.complete || (typeof this.naturalWidth == "undefined" && this.naturalWidth == 0) || !this.src) {
    $(this).attr("src", "../img/img.jpg");
  }
});

Copier après la connexion

S'il s'agit d'une image ajoutée dynamiquement, elle doit encore être re- Le jugement
peut être jugé après un certain temps, sinon il sera problématique d'utiliser cette méthode pour juger si vous venez d'ajouter une nouvelle image et que la ressource image n'a peut-être pas encore été demandée
En HTML 5, deux nouveaux attributs sont ajoutés à déterminer la largeur et la hauteur de l'image, à savoir les attributs naturalWidth et naturalHeight (l'image doit être entièrement téléchargée sur le navigateur client pour déterminer)
L'attribut onreadystatechange d'Img n'est pas discuté, il y a différences entre les navigateurs

1.3 Utiliser la capture d'événements d'erreur pour traiter (jugement global, addition dynamique Les éléments peuvent également être - solution optimale)

document.addEventListener("error", function (e) {

  var elem = e.target;
  if (elem.tagName.toLowerCase() == &#39;img&#39;) {
    elem.src = "../img/img.jpg";
  }
}, true);

Copier après la connexion

Vous pouvez surveiller la balise img générée dynamiquement

1.4 Utiliser la méthode fournie par le plug-in imagesLoaded pour traiter

imagesLoaded est principalement utilisé pour charger des images en cascade sur le téléphone mobile. Il peut également être utilisé pour gérer les échecs de chargement des images et les remplacer par des images par défaut

// 用的是jQuery的deferred来实现的
$(&#39;img&#39;).imagesLoaded()
    .always(function (instance) { // always事件，在所有图片都加载完成（成功与否不论）时触发
      console.log(&#39;all images loaded&#39;);
    })
    .done(function (instance) { // done事件，在所有图片都加载成功时触发
      console.log(&#39;all images successfully loaded&#39;);
    })
    .fail(function (instance) { // fail事件，在所有图片都加载完成，并且至少有一张图片加载失败时触发
      console.log(&#39;all images loaded, at least one is broken&#39;);
    })
    .progress(function (instance, image) { // progress事件，在每一张图片加载完成时都触发一次
      var result = image.isLoaded ? &#39;loaded&#39; : &#39;broken&#39;; // 判断当前图片加载成功与否
      image.img.src = image.isLoaded ? image.img.src : "../img/img.jpg";
      console.log(&#39;image is &#39; + result + &#39; for &#39; + image.img.src);
    });

Copier après la connexion

S'il s'agit d'une image ajoutée dynamiquement, elle doit encore être réévaluée

2. Méthode de préchargement des images

// 实现预加载图片，传入的参数是数组，数组的每一项为该图片的地址
function preloadimages(arr) {
  var newimages = [];
  var arr = (typeof arr != "object") ? [arr] : arr; // 确保参数总是数组
  for (var i = 0,len = arr.length; i < len; i++) {
    newimages[i] = new Image();
    newimages[i].src = arr[i];
  }
}

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir. .