Das Laden des jQuery-Bildes schlägt fehl. So ersetzen Sie das Standardbild

In diesem Artikel wird hauptsächlich eine Zusammenfassung der Methoden zum Ersetzen des Standardbilds vorgestellt, wenn das Laden von jQuery-Bildern fehlschlägt, sowie das verwendete relevante Wissen: die fertige Methode von jquery, $("img").error(), das vollständige Attribut von img, Plug-in imagesLoaded, Ereignisdelegation und Ereigniserfassung Und die Methode zum Vorladen von Bildern usw. Freunde, die es benötigen, können darauf verweisen.

Hier kommt der entscheidende Punkt: Denken Sie unbedingt daran, dass Fehlerereignisse nicht sprudeln.

Verwandte Wissenspunkte: Ready-Methode von jquery, $("img").error(), vollständiges Attribut von img, Plug-in imagesLoaded, Ereignisdelegation, Methoden zur Ereigniserfassung und zum Vorladen von Bildern usw.

1. Wenn das Bild nicht geladen werden kann, ersetzen Sie es durch das Standardbild

1.1 Binden Sie das Fehlerereignis an das Bild

Das Fehlerereignis wird ausgelöst, wenn das Laden des Bildes fehlschlägt

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

• The Das Ereignisattribut onerror wird nicht empfohlen, Sie wissen schon ~O.o

• Wenn es sich um ein dynamisch hinzugefügtes Bild handelt, müssen Sie dieses Ereignis erneut binden. Die Ereignisdelegierung kann für Dinge wie Klickereignisse verwendet werden, die Ereignisdelegierung basiert jedoch auf der Idee des Ereignis-Bubblings, und Fehlerereignisse unterstützen das Bubbling nicht.

• Die Verwendung wird nicht empfohlen Binden Sie das Fehlerereignis an img. Wenn img das Bild nicht laden kann, bindet img das Fehlerereignis möglicherweise nicht, was dazu führt, dass es nicht durch das Standardbild ersetzt wird

1.2 Verwenden Sie das vollständige Attribut zur Beurteilung

Wenn das Laden des Bildes fehlschlägt, ist der vollständige Attributwert falsch, und wenn das Bild erfolgreich geladen wurde, ist er wahr

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

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

• Wenn es sich um ein dynamisch hinzugefügtes Bild handelt, müssen Sie es noch neu beurteilen

• Sie können nach einer Weile erneut beurteilen, da die Bildressource sonst möglicherweise noch vorhanden ist, wenn Sie das Bild gerade hinzugefügt haben. Es wird problematisch sein, diese Methode zu verwenden, um die Breite und Höhe des Bildes vor dem zu bestimmen Anfrage ist abgeschlossen

• In HTML 5 werden zwei neue Attribute hinzugefügt, um die Breite und Höhe des Bildes zu bestimmen, nämlich die Attribute naturalWidth und naturalHeight (können erst bestimmt werden, nachdem das Bild vollständig ist auf den Client-Browser heruntergeladen)

• Das onreadystatechange-Attribut von IMG wird nicht besprochen, es gibt Browserunterschiede

1.3 Verwenden Sie die Fehlerereigniserfassung, um Prozess (globale Beurteilung, dynamisch hinzugefügte Elemente können auch sein - optimale Lösung)

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

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

Sie können das dynamisch überwachen generiertes IMG-Tag

1.4 Verwenden Sie die vom Plug-in „imagesLoaded“ bereitgestellte Methode, um

imagesLoaded zu verarbeiten. Es wird hauptsächlich zum Wasserfallen auf Mobiltelefonen verwendet. Streaming-Methode zum Laden von Bildern. kann auch verwendet werden, um Fehler beim Laden von Bildern zu beheben und sie durch das Standardbild

// 用的是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);
    });

zu ersetzen, wenn es dynamisch hinzugefügt wird. Standbilder muss neu beurteilt werden

2. Methode zum Vorladen von Bildern

// 实现预加载图片，传入的参数是数组，数组的每一项为该图片的地址
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];
  }
}

Verwandte Empfehlungen:

Beispiel für die Javascript-Implementierung einer asynchronen Bild-Upload-Methode

JS-Umschalteffekt für Bild-Diashows

So legen Sie zufällig wechselnde Hintergrundbilder in js fest

Das obige ist der detaillierte Inhalt vonDas Laden des jQuery-Bildes schlägt fehl. So ersetzen Sie das Standardbild. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!