Le chargement de l'image jQuery échoue, comment remplacer l'image par défaut

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

Voici le point clé : 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 le chargement de l'image échoue

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

• Le L'erreur d'attribut d'événement n'est pas recommandée, vous savez ~O.o

• S'il s'agit d'une image ajoutée dynamiquement, vous devez relier cet événement. La délégation d'événements peut être utilisée pour les événements de clic, mais la délégation d'événements se fait en utilisant l'idée de 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 Utilisez 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, vous devez toujours réévaluer

• Vous pouvez réévaluer après un certain temps, sinon la ressource image peut être toujours là si vous venez d'ajouter l'image. Il sera problématique d'utiliser cette méthode pour déterminer la largeur et la hauteur de l'image avant que la demande ne soit effectuée. terminé

• Dans HTML 5, deux nouveaux attributs sont ajoutés pour déterminer la largeur et la hauteur de l'image, à savoir les attributs naturalWidth et naturalHeight (ne peuvent être déterminés qu'une fois l'image complètement téléchargée sur. le navigateur client)

• L'attribut onreadystatechange d'IMG n'est pas discuté, il existe des différences entre les navigateurs

1.3 Utiliser la capture d'événement d'erreur pour traiter ( jugement global, des éléments ajoutés dynamiquement 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 l'img généré dynamiquement tag

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

imagesLoaded est principalement utilisé pour créer une cascade sur le téléphone mobile. Méthode de streaming pour charger des images, peut également être utilisé pour gérer l'échec de chargement de l'image et la remplacer par l'image 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);
    });

si elle est ajoutée dynamiquement. Les images doivent encore être utilisées. être rejugé

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

Recommandations associées :

Implémentation Javascript d'un exemple de méthode de téléchargement d'images asynchrone

Effet de commutation de diaporama d'images de commutation JS

Comment définir une image d'arrière-plan à commutation aléatoire dans js

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!