Ich verwende JavaScript mit der jQuery-Bibliothek, um Bildminiaturen zu bearbeiten, die in einer ungeordneten Liste enthalten sind. Wenn das Bild geladen wird, macht es eine Sache, wenn ein Fehler auftritt, macht es etwas anderes. Ich verwende jQuery load()
und error()
Methoden als Ereignisse. Nach diesen Ereignissen überprüfe ich das Image-DOM-Element auf .complete, um sicherzustellen, dass das Image noch nicht geladen wurde, bevor jQuery die Ereignisse registrieren konnte.
Es funktioniert ordnungsgemäß, außer wenn ein Fehler auftritt, bevor jQuery die Ereignisse registrieren kann. Die einzige Lösung, die ich mir vorstellen kann, besteht darin, das img- onerror
Attribut zu verwenden, um irgendwo global (oder auf dem Knoten selbst) ein "Flag" zu speichern, das besagt, dass es fehlgeschlagen ist, damit jQuery dieses "store / node" überprüfen kann, wenn .complete überprüft wird.
Hat jemand eine bessere Lösung?
Bearbeiten: Fettgedruckte Hauptpunkte und zusätzliche Details unten: Ich überprüfe, ob ein Bild vollständig ist (auch bekannt als geladen), nachdem ich dem Bild ein Lade- und Fehlerereignis hinzugefügt habe. Auf diese Weise weiß ich immer noch , ob das Bild vor der Registrierung der Ereignisse geladen wurde. Wenn das Bild nach den Ereignissen nicht geladen wird, kümmern sich die Ereignisse darum, wenn dies der Fall ist. Das Problem dabei ist, dass ich leicht überprüfen kann, ob ein Bild bereits geladen ist, aber nicht feststellen kann, ob stattdessen ein Fehler aufgetreten ist.
quelle
Antworten:
Eine andere Möglichkeit besteht darin, die Ereignisse
onload
und / oderonerror
Ereignisse auszulösen, indem ein Bildelement im Speicher erstellt und seinsrc
Attribut auf das ursprünglichesrc
Attribut des Originalbilds gesetzt wird. Hier ist ein Beispiel dafür, was ich meine:Hoffe das hilft!
quelle
.attr
Zeile nach den Zeilen.load
und setzen.error
. Andernfalls besteht die Gefahr, dass das Image geladen wird (oder ein Fehler auftritt), bevor diese Rückrufe hinzugefügt werden, und sie werden nicht aufgerufen..load()
und.error()
Methoden sind verwirrend und jetzt veraltet. Verwenden.on()
und verwenden Sie dasload
underror
als Ereignisse.Überprüfen Sie die
complete
undnaturalWidth
Eigenschaften, die in dieser Reihenfolge.https://stereochro.me/ideas/detecting-broken-images-js
quelle
Basierend auf meinem Verständnis der W3C-HTML-Spezifikation für das
img
Element sollten Sie in der Lage sein, dies mithilfe einer Kombination der Attributecomplete
und zu tunnaturalHeight
, wie folgt:Aus der Spezifikation für das
complete
Attribut:Gibt also im Wesentlichen
complete
true zurück, wenn das Bild entweder vollständig geladen wurde oder nicht geladen werden konnte. Da wir nur den Fall wollen, in dem das Bild erfolgreich geladen wurde, müssen wir auch dasnauturalHeight
Attribut überprüfen :Und
available
ist so definiert:Wenn das Bild also "defekt" ist (nicht geladen werden konnte), befindet es sich im defekten Zustand, nicht im verfügbaren Zustand, also
naturalHeight
ist es 0.Daher
imgElement.complete && imgElement.naturalHeight !== 0
sollte uns bei der Überprüfung mitgeteilt werden, ob das Bild erfolgreich geladen wurde.Weitere Informationen hierzu finden Sie in der W3C-HTML-Spezifikation für das
img
Element oder in MDN .quelle
Ich habe viele verschiedene Wege ausprobiert und dieser Weg ist der einzige, der für mich funktioniert hat
Sie können auch eine Rückruffunktion hinzufügen, die ausgelöst wird, sobald alle Bilder in das DOM geladen und bereit sind. Dies gilt auch für dynamisch hinzugefügte Bilder. http://jsfiddle.net/kalmarsh80/nrAPk/
quelle
Verwenden Sie die
imagesLoaded
Javascript-Bibliothek .Verwendbar mit einfachem Javascript und als jQuery-Plugin.
Eigenschaften:
Ressourcen
quelle
complete
Eigenschaft scheint nicht eindeutig unterstützt zu werden: Es kann keine zuverlässige Informationsquelle zur Browserunterstützung gefunden werden.complete
Die Eigenschaft scheint auch keine klare Spezifikation zu haben: Die HTML5-Spezifikation ist die einzige, die sie erwähnt, und sie befindet sich zum Zeitpunkt des Schreibens noch in einer Entwurfsversion. Wenn SienaturalWidth
&naturalHeight
nur Unterstützung IE9 +, also wenn Sie es verwenden , um herauszufinden , ob das Bild geladen ist, können Sie einige „clevere“ Trick muss es auf alten Browsern funktioniert, und Sie müssen überprüfen , Cross-Browser - Verhalten ist konsistentAbrufen von Informationen von Bildelementen auf der Seite
Testen der Arbeit mit Chrome und Firefox
Working jsFiddle (öffnen Sie Ihre Konsole, um das Ergebnis anzuzeigen )
Hinweis: Ich habe jQuery verwendet . Ich dachte, dies kann mit vollständigem Javascript erreicht werden
Ich finde hier gute Informationen OpenClassRoom -> dies ist ein französisches Forum
quelle
Echtzeit-Netzwerkdetektor - Überprüfen Sie den Netzwerkstatus, ohne die Seite zu aktualisieren: aktualisieren (Es ist keine Abfrage, aber getestet und funktioniert zu 100%: (getestet in Firefox v25.0))
Code:
Wenn die Verbindung unterbrochen wird, drücken Sie einfach die Taste Erneut.
Update 1: Automatische Erkennung ohne Aktualisierung der Seite:
quelle
Nachdem ich die interessanten Lösungen auf dieser Seite gelesen hatte, erstellte ich eine benutzerfreundliche Lösung, die stark von SLaks und Noyos Beitrag beeinflusst war und anscheinend an ziemlich aktuellen Versionen (zum Zeitpunkt des Schreibens) von Chrome, IE, Firefox, Safari und Opera (alles unter Windows). Es funktionierte auch auf einem iPhone / iPad-Emulator, den ich verwendet habe.
Ein Hauptunterschied zwischen dieser Lösung und SLaks und Noyos Beitrag besteht darin, dass diese Lösung hauptsächlich die Eigenschaften naturalWidth und naturalHeight überprüft. Ich habe festgestellt, dass diese beiden Eigenschaften in den aktuellen Browserversionen die hilfreichsten und konsistentesten Ergebnisse liefern.
Dieser Code gibt TRUE zurück, wenn ein Bild vollständig UND erfolgreich geladen wurde. Es gibt FALSE zurück, wenn ein Bild entweder noch nicht vollständig geladen wurde oder nicht geladen werden konnte.
Eine Sache, die Sie beachten müssen, ist, dass diese Funktion auch FALSE zurückgibt, wenn das Bild ein 0x0-Pixel-Bild ist. Aber diese Bilder sind ziemlich ungewöhnlich und ich kann mir keinen sehr nützlichen Fall vorstellen, in dem Sie überprüfen möchten, ob ein 0x0-Pixel-Bild bereits geladen wurde :)
Zuerst fügen wir dem HTMLImageElement-Prototyp eine neue Funktion mit dem Namen "isLoaded" hinzu, damit die Funktion für jedes Bildelement verwendet werden kann.
Jedes Mal, wenn wir den Ladestatus des Bildes überprüfen müssen, rufen wir einfach die Funktion "isLoaded" auf.
Laut Giorgians Kommentar zum Beitrag von SLaks und Noyo kann diese Lösung wahrscheinlich nur als einmalige Überprüfung von Safari Mobile verwendet werden, wenn Sie vorhaben, das SRC-Attribut zu ändern. Sie können dies jedoch umgehen, indem Sie ein Bildelement mit einem neuen SRC-Attribut erstellen, anstatt das SRC-Attribut für ein vorhandenes Bildelement zu ändern.
quelle
So habe ich es geschafft, browserübergreifend mit einer Kombination der oben genannten Methoden zu arbeiten (ich musste auch Bilder dynamisch in den Dom einfügen):
Hinweis: Sie müssen einen gültigen booleschen Status für die isIE-Variable angeben.
quelle
// Oder als Plugin
quelle
Soweit ich weiß, ist die Eigenschaft .complete nicht Standard. Es ist möglicherweise nicht universell ... Ich stelle fest, dass es in Firefox-Versen IE anders zu funktionieren scheint. Ich lade eine Reihe von Bildern in Javascript und überprüfe dann, ob sie vollständig sind. In Firefox scheint dies großartig zu funktionieren. Im IE ist dies nicht der Fall, da die Bilder anscheinend in einen anderen Thread geladen werden. Dies funktioniert nur, wenn zwischen meiner Zuweisung zu image.src und dem Überprüfen der Eigenschaft image.complete eine Verzögerung liegt.
Die Verwendung von image.onload und image.onerror funktioniert auch bei mir nicht, da ich einen Parameter übergeben muss, um zu wissen, um welches Bild es sich handelt, wenn die Funktion aufgerufen wird. Jeder Weg, dies zu tun, scheint zu scheitern, weil er tatsächlich dieselbe Funktion zu übergeben scheint, nicht verschiedene Instanzen derselben Funktion. Der Wert, den ich zur Identifizierung des Bildes eingebe, ist also immer der letzte Wert in der Schleife. Ich kann mir keinen Weg vorstellen, um dieses Problem zu umgehen.
In Safari und Chrome wird image.complete true und naturalWidth festgelegt, auch wenn in der Fehlerkonsole ein 404 für dieses Image angezeigt wird. Ich habe dieses Image absichtlich entfernt, um dies zu testen. Aber das oben genannte funktioniert gut für Firefox und IE.
quelle
Dieser Codeausschnitt hat mir geholfen, Probleme beim Zwischenspeichern des Browsers zu beheben:
Wenn der Browser-Cache deaktiviert ist, funktioniert nur dieser Code nicht:
Damit es funktioniert, müssen Sie Folgendes hinzufügen:
quelle
Mit diesem
JavaScript
Code können Sie überprüfen, ob das Bild erfolgreich geladen wurde oder nicht.Probieren Sie das aus
quelle
Ich hatte viele Probleme mit dem vollständigen Laden eines Bildes und des EventListener.
Was auch immer ich versuchte, die Ergebnisse waren nicht zuverlässig.
Aber dann habe ich die Lösung gefunden. Es ist technisch gesehen nicht schön, aber jetzt hatte ich nie ein fehlgeschlagenes Laden des Bildes.
Was ich getan habe:
Anstatt das Bild einmal zu laden, lade ich es direkt nach dem ersten Mal ein zweites Mal und beide laufen durch den Eventhandler.
Alle meine Kopfschmerzen sind weg!
Übrigens: Ihr Jungs von stackoverflow hat mir schon mehr als hundert Mal geholfen. Dafür ein sehr großes Dankeschön!
quelle
Dieser hat gut für mich funktioniert :)
quelle