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

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

• 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");
  }
});

• 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() == 'img') {
    elem.src = "../img/img.jpg";
  }
}, true);

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

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];
  }
}

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. .

Articles connexes :

Comment utiliser Babel pour transcoder automatiquement ES6 en ES5 dans Webstorm

Comment le faire dans Bootstrap4 + Vue2 Implémenter la requête de pagination

Comment utiliser keep-alive dans vue2

Il existe une configuration d'environnement pour le plug-in jquery dans le webpack (détaillée tutoriel)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!