Probleme beim Laden von Bildern in jQuery

In diesem Artikel wird hauptsächlich eine Zusammenfassung der jQuery-Methoden zum Laden von Bildern zum Ersetzen des Standardbilds sowie die verwendeten relevanten Kenntnisse vorgestellt: die Ready-Methode von jQuery, $("img").error(), das vollständige Attribut von img und das Plug-in imagesLoaded und Ereignisdelegation, Methoden zur Ereigniserfassung und zum Vorladen von Bildern usw. Freunde, die es benötigen, können darauf verweisen

In diesem Artikel werden hauptsächlich verschiedene Möglichkeiten zum Ersetzen des Standardbilds beschrieben, nachdem das Laden des Bildes auf der Seite fehlgeschlagen ist

Der entscheidende Punkt ist: Es muss beachtet werden, dass Fehlerereignisse nicht in die Luft 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 Bild nicht geladen werden kann

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

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

• Wenn das Bild dynamisch hinzugefügt wird, 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 Bild nicht geladen werden kann, 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 ein Urteil fällen, sonst ist es Es wird problematisch sein, mit dieser Methode zu beurteilen, ob Sie gerade ein Bild hinzugefügt haben und die Bildressource möglicherweise noch nicht angefordert wurde

• In HTML 5 werden zwei neue Attribute hinzugefügt, um das zu bestimmen Breite und Höhe des Bildes, nämlich die Attribute naturalWidth und naturalHeight (zur Bestimmung muss das Bild vollständig in den Client-Browser heruntergeladen werden)

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

1.3 Fehlerereigniserfassung zur Verarbeitung verwenden (globale Beurteilung, dynamisch hinzugefügte Elemente Auch möglich – optimale Lösung)

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

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

kann dynamisch generierte Bilder überwachen Tags

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

imagesLoaded zu verarbeiten. Es wird hauptsächlich zum Laden von Bildern im Wasserfall-Flow-Modus auf dem Mobiltelefon verwendet kann auch verwendet werden, um Fehler beim Laden von Bildern zu behandeln und sie durch Standardbilder zu ersetzen

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

Wenn es sich um ein dynamisch hinzugefügtes Bild handelt, muss es noch 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];
  }
}

Das oben Gesagte habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie Babel, um ES6 in Webstorm automatisch in ES5 zu transkodieren

So machen Sie es in Bootstrap4 + Vue2 Paging-Abfrage implementieren

So verwenden Sie Keep-Alive in vue2

Es gibt eine Umgebungskonfiguration für das JQuery-Plug-In im Webpack (detailliert). Tutorial)

Das obige ist der detaillierte Inhalt vonProbleme beim Laden von Bildern in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!