Behandlung von broken image(s)

Veröffentlicht von Chris - 22. Dezember 2015

Ein oder mehrere broken Images können eine eigentlich gute Website schnell nicht nur unattraktiv, sondern auch uninformativ machen. Daher ist es am besten zu überprüfen, ob auch alle Bilder geladen wurden und im Fall eines broken Image eine Fallback- oder Default Lösung zu haben.

Wie funktioniert das? Ganz einfach über das HTML DOM Event „onerror“. Das Event „onerror“ wird als Attribut dem HTML <img> Tag mitgegeben, das kann z.B. so aussehen:

<img src="path/to/image.jpg" onerror="">

Die weitere Behandlung kann nun auf zwei verschiedene weisen passieren, man kann grob sagen: Mit oder ohne JS.

Variante mit JavaScript

In dem Event „onerror“ wird eine JS-Funktion initialisiert, z. B. wie folgt:

<img src="path/to/image.jpg" onerror="brokenImageHandlerFunction(this)">

Das „this“ als Parameter der Funktion übergibt die Bilde-Eigenschaften (wie z.B. „src“) in die Funktion. Die Funktion wird in einem <script>-Tag bereitgestellt, wie z.B. nachfolgend:

function brokenImageHandlerFunction(image) {
    image.onerror="";
    image.src ="path/to/default.jpg";
    return true;
}

Die Funktion ist recht selbsterklärend, zu erst wird das „onerror“ Event zurückgesetzte, danach wird der Bild-Quellen-Eigenschaft ein default oder Fallback Bild mitgegeben und alles mittels return true zurück gegeben.

Veriante ohne JS und weniger Aufwand 😉

Im „onerror“ Event des img-Tags selbst wird die Behandlung eingebaut, das sieht z.b. so aus:

<img onerror="this.onerror=null;this.src='path/to/default.jpg';">

Auch hier ist die Funktionalität schnell erklärt: this bezieht sich auf das aktuelle Bild und setzt dessen onerror Event zurück auf null und gibt dann der Bild-Quellen-Eigenschaft ein default oder Fallback Bild mit. Bei dieser Variante sieht man sehr oft die Schreibweise des „onerror“ Event in camel case, also so onError. Ich konnte noch keine Unterschiede feststellen – wer einen findet oder weiß kann gerne (s)einen Kommentar hinterlassen.

Fazit

Ich persönlich finde die zweite Variante etwas besser, da es schneller geschrieben ist und ohne JS auskommt. Darüber hinaus läuft es in allen Browsern. Es ist also ein guter Weg seine Website attraktiv und informativ zu erhalten 🙂 Die beiden vorgestellten Varianten sind unter folgendem Link nochmal beschrieben und noch eine JQuery Variante.

	Detecting Broken Images in JavaScript \| MaisonBisson.com
Source: maisonbisson.com/post/12150/detecting-broken-images-in-javascript/