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.

broken-image

Broken Icons_gross

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

   

Das könnte Dich auch interessieren

Halunken-Tag: Inhalte auf Webseiten – anpassen und ausprobieren

Immer wieder werden neue Webseiten, Landingpage und ähnliche Seiten geplant, konzipiert, designet und umgesetzt. Dabei spielen die richtigen Inhalte eine wicht...

Design Thinking – Wozu das ganze Denken?

Der Begriff Design Thinking wird oft genannt, wenn es um Innovation und nutzerzentrierte Digitalprodukte geht. Aber was genau ist damit gemeint und wann ist es ...

Projektmanagement in Animes, Teil II: Gescheiterte Projekte

Willkommen zurück, meine lieben Anime-Nerds! Im ersten Teil der Reihe "Projektmanagement in Animes" ging es um erfolgreiche Projekte sowie um die Mittel, die e...