Ich habe eine Webseite, die eine Reihe von Bildern enthält. Manchmal ist das Bild nicht verfügbar, sodass ein fehlerhaftes Bild im Browser des Clients angezeigt wird.
Wie verwende ich jQuery, um den Satz von Bildern abzurufen, ihn nach fehlerhaften Bildern zu filtern und dann den src zu ersetzen?
- Ich dachte, es wäre einfacher, dies mit jQuery zu tun, aber es stellte sich als viel einfacher heraus, nur eine reine JavaScript-Lösung zu verwenden, dh die von Prestaul bereitgestellte.
quelle
Ich benutze den eingebauten
error
Handler:Bearbeiten: Die
error()
Methode ist in Abfrage 1.8 und höher veraltet . Verwenden Sie.on("error")
stattdessen Folgendes:quelle
Falls jemand wie ich versucht, das
error
Ereignis an ein dynamisches HTML-img
Tag anzuhängen , möchte ich darauf hinweisen, dass es einen Haken gibt:Anscheinend sprudeln
img
Fehlerereignisse in den meisten Browsern nicht, was im Standard angegeben ist .So etwas wie das Folgende wird nicht funktionieren :
Hoffe, dass dies jemand anderem hilfreich sein wird. Ich wünschte, ich hätte das hier in diesem Thread gesehen. Aber ich habe es nicht getan. Also füge ich es hinzu
quelle
Hier ist eine eigenständige Lösung:
quelle
$.browser
ist veraltet und wurde jetzt entfernt. Verwenden Sie stattdessen die Feature-Erkennung (wird in diesem Fall komplizierter).204 No Content
.Ich glaube, das ist es, wonach Sie suchen : jQuery.Preload
Hier ist der Beispielcode aus der Demo. Sie geben das Laden und die nicht gefundenen Bilder an und schon sind Sie fertig:
quelle
Quelle: http://www.developria.com/2009/03/jquery-quickie---broken-images.html
quelle
Während das OP versuchte, das SRC zu ersetzen, möchten sicher viele Leute, die diese Frage beantworten, nur das kaputte Bild verbergen. In diesem Fall hat diese einfache Lösung für mich großartig funktioniert.
Verwenden von Inline-JavaScript:
Verwenden von externem JavaScript:
Verwenden von modernem externem JavaScript:
Siehe Browser - Unterstützung für NoteList.forEach und Pfeil - Funktionen .
quelle
Hier ist eine schnelle und schmutzige Möglichkeit, alle fehlerhaften Bilder zu ersetzen, und es ist nicht erforderlich, den HTML-Code zu ändern;)
Codepen Beispiel
quelle
Ich konnte kein Skript finden, das meinen Anforderungen entspricht, daher habe ich eine rekursive Funktion erstellt, um nach fehlerhaften Bildern zu suchen und sie alle vier Sekunden neu zu laden, bis sie behoben sind.
Ich habe es auf 10 Versuche beschränkt, als ob es bis dahin nicht geladen wäre. Das Image ist möglicherweise nicht auf dem Server vorhanden und die Funktion würde in eine Endlosschleife eintreten. Ich teste immer noch. Fühlen Sie sich frei, es zu optimieren :)
quelle
Dies ist eine beschissene Technik, aber sie ist ziemlich garantiert:
quelle
Sie können dafür GitHubs eigenen Abruf verwenden:
Frontend: https://github.com/github/fetch
oder für Backend eine Node.js-Version: https://github.com/bitinn/node-fetch
Bearbeiten: Diese Methode wird XHR ersetzen und war angeblich bereits in Chrome. Für jeden, der dies in Zukunft liest, ist die oben genannte Bibliothek möglicherweise nicht enthalten.
quelle
Dies ist JavaScript, sollte browserübergreifend kompatibel sein und ohne das hässliche Markup geliefert werden
onerror=""
:CODEPEN:
quelle
while (i--)
Besser anrufen mit
Da die Verwendung
document.ready
nicht unbedingt bedeutet, dass Bilder geladen werden, wird nur der HTML-Code geladen. Somit besteht keine Notwendigkeit für einen verzögerten Anruf.quelle
CoffeeScript- Variante:
Ich habe es geschafft, ein Problem mit Turbolinks zu beheben, das dazu führt, dass die .error () -Methode manchmal in Firefox ausgelöst wird, obwohl das Bild wirklich vorhanden ist.
quelle
Mit der Antwort von Prestaul habe ich einige Überprüfungen hinzugefügt und bevorzuge die jQuery-Methode.
quelle
Wenn Sie Ihr
img
mit eingefügt haben , z. B.innerHTML
:$("div").innerHTML = <img src="wrong-uri">
, Können Sie ein anderes Bild laden, wenn dies fehlschlägt. Beispiel:Warum wird
javascript: _
benötigt? Da Skripte, die über Skript-Tags in das DOM eingefügtinnerHTML
werden, zum Zeitpunkt der Einfügung nicht ausgeführt werden, müssen Sie explizit sein.quelle
Ich habe diesen Beitrag gefunden, als ich mir diesen anderen SO-Beitrag angesehen habe . Unten ist eine Kopie der Antwort, die ich dort gegeben habe.
Ich weiß, dass dies ein alter Thread ist, aber React ist populär geworden, und vielleicht kommt jemand, der React verwendet, hierher, um nach einer Antwort auf dasselbe Problem zu suchen.
Wenn Sie also React verwenden, können Sie Folgendes tun: Dies war eine Antwort, die ursprünglich von Ben Alpert vom React-Team hier bereitgestellt wurde
quelle
Ich habe eine Geige erstellt , um das kaputte Bild durch das Ereignis "onerror" zu ersetzen. Dies kann Ihnen helfen.
quelle
Hier ist ein Beispiel für die Verwendung des von JQuery umschlossenen HTML5-Image-Objekts. Rufen Sie die Ladefunktion für die primäre Image-URL auf. Wenn dieses Laden einen Fehler verursacht, ersetzen Sie das src-Attribut des Images durch eine Sicherungs-URL.
quelle
Pure JS. Meine Aufgabe war: Wenn das Bild 'bl-Once.png' leer ist -> fügen Sie das erste Bild (das keinen 404-Status hat) aus der Array-Liste ein (im aktuellen Verzeichnis):
Vielleicht muss es verbessert werden, aber:
Es wird also die korrekte 'required.png' aus dem aktuellen Verzeichnis in meine src oder 'no-image.png' einfügen.
quelle
Ich bin mir nicht sicher, ob es einen besseren Weg gibt, aber ich kann mir einen Hack vorstellen, um ihn zu bekommen - Sie könnten Ajax auf die img-URL posten und die Antwort analysieren, um zu sehen, ob das Bild tatsächlich zurückgekommen ist. Wenn es als 404 oder so zurückkam, tauschen Sie das Bild aus. Obwohl ich davon ausgehe, dass dies ziemlich langsam sein wird.
quelle
Ich habe mein Problem mit diesen zwei einfachen Funktionen gelöst:
quelle
jQuery 1.8
jQuery 3
Referenz
quelle
Ich denke, ich habe eine elegantere Möglichkeit, Ereignisse zu delegieren und Ereignisse zu erfassen
window
,error
selbst wenn das Backup-Image nicht geladen werden kann.Der Punkt ist :
Fügen Sie den Code in das ein
head
und führen Sie es als erstes Inline-Skript aus. Es werden also die Fehler abgehört, die nach dem Skript auftreten.Verwenden Sie die Ereigniserfassung, um die Fehler abzufangen, insbesondere bei Ereignissen, die nicht sprudeln.
Verwenden Sie die Ereignisdelegierung, um zu vermeiden, dass Ereignisse für jedes Bild gebunden werden.
Geben Sie dem Fehlerelement
img
ein Attribut, nachdem Sie ihm ein Attribut gegeben habenbackup.png
, um das Verschwinden derbackup.png
und der nachfolgenden Endlosschleife wie folgt zu vermeiden :img error-> backup.png-> error-> backup.png-> error -> ,,,,,
quelle
let isImgErrorHandled = target.src === 'backup.png';
da es ein wenig vereinfacht.target.src='backup.png'
aber das nächste Malconsole.log(target.src)
kann nicht seinbackup.png
Sie können einen Platzhalterpfad übergeben und darin auf alle Eigenschaften des fehlgeschlagenen Bildobjekts zugreifen über
$*
:http://jsfiddle.net/ARTsinn/Cu4Zn/
quelle
Das hat mich seit Jahren frustriert. Mein CSS-Fix legt ein Hintergrundbild auf dem
img
. Wenn ein dynamisches Bildsrc
nicht in den Vordergrund geladen wird, ist ein Platzhalter auf demimg
Hintergrund des Bildschirms sichtbar . Dies funktioniert , wenn Sie Ihre Bilder mit einer Standardgröße (zBheight
,min-height
,width
und / odermin-width
).Sie sehen das Symbol für defekte Bilder, aber es ist eine Verbesserung. Bis auf IE9 erfolgreich getestet. iOS Safari und Chrome zeigen nicht einmal ein defektes Symbol.
Fügen Sie eine kleine Animation hinzu, um
src
Zeit zum Laden ohne Hintergrundflimmern zu haben. Chrome wird im Hintergrund reibungslos ausgeblendet, Desktop Safari jedoch nicht.quelle
Wenn das Bild nicht geladen werden kann (z. B. weil es nicht unter der angegebenen URL vorhanden ist), wird die Bild-URL in die Standard-URL geändert.
Weitere Informationen zu .error ()
quelle
Ich habe das gleiche Problem. Dieser Code funktioniert gut in meinem Fall.
quelle
Manchmal ist die Verwendung des
error
Ereignisses nicht möglich, z. B. weil Sie versuchen, etwas auf einer bereits geladenen Seite auszuführen, z. B. wenn Sie Code über die Konsole, ein Lesezeichen oder ein asynchron geladenes Skript ausführen. In diesem Fall scheint es den Trick zu tun , dies zu überprüfenimg.naturalWidth
undimg.naturalHeight
0 zu sein.Hier ist beispielsweise ein Ausschnitt zum erneuten Laden aller fehlerhaften Bilder von der Konsole:
quelle
Ich fand, dass dies am besten funktioniert. Wenn ein Bild beim ersten Laden nicht geladen werden kann, wird es vollständig aus dem DOM entfernt. Durch Ausführen wird
console.clear()
das Konsolenfenster sauber gehalten, da die 404-Fehler bei Try / Catch-Blöcken nicht ausgelassen werden können.quelle