Fehlende Bilder mit jQuery nachbearbeiten

Hat man mal einen Blog oder eine Webseite ein paar Jahre online, entstehen primär zwei Probleme: 1) Evtl. verlinkte Seiten existieren nicht mehr und 2) evtl. direkt verlinkte Bilder sind auch weg. Letzteres kann sogar dann passieren, wenn man Bilder lokal ablegt, und man aus Versehen mal was löscht. Entweder das eine oder das andere zu finden ist fast unmöglich, außer Kommisar Zufall hilft, oder man verwendet entsprechende Tools zum Scannen der Seite.

Elegant geht zumindest das Problem mit den verschwundenen Bildern über jQuery zu lösen. jQuery4U hat bereits vor einiger Zeit ein spannendes Snippet veröffentlicht:

// Replace source
$('img').error(function(){
        $(this).attr('src', 'missing.png');
});
 
// Or, hide them
$("img").error(function(){
        $(this).hide();
});

Dieses baut auf dem jQuery-Befehl error() auf und ersetzt fehlende Bilder durch einen entsprechenden Platzhalter, bzw. blendet diese weg. In einem neuen Anlauf versucht jQuery4U nun, dass Problem mit Ajax zu lösen. Das Resultat dürfte sicherlich das gleiche sein, die Ajax-Version allerdings auch die sicherere. Das Skript überprüft mittels eines Ajax-Requests, ob das Bild vorhanden ist. Da der Aufruf vom Type HEAD ist, wird wirklich nur die Existenz überprüft, und die Grafik nicht ein zweites mal herunter geladen. Womit wir dann auch beim eigentlichen Problem wären: durch das Skript steigt die Anzahl der Aufrufe für Bilder um das doppelte.

Das halte ich persönlich für einen zu großen Overhead, da in der Regel ja davon auszugehen ist, dass die Website funktioniert, und kaputte Bilder eher eine Ausnahmeentscheidung sein sollten. Insofern gefällt mir das einfache Überprüfen mittels des Befehls error() besser.

Ähnliche Beiträge

jQuery Plugin Boilerplate Schon seit geraumer Zeit verwende ich in jQuery eine Menge selbst geschriebener Plugins, das erhöht die Wiederverwendbarkeit von Code deutlich. Aber e...
User Interfaces mit jQuery Ich denke das es im heutigen Webdesign kaum noch ein Formular gibt, das nicht mit JavaScript (oder jQuery) aufgewertet wird. Im einfachsten Fall zum A...
Ninja User Interface – Schicke Widgets für jQuery... Alleine schon wegen dem Namen „jQuery Webjutsu“ ist die Ninja UI erwähnenswert. Es sollte sich inzwischen bis in die hintersten Ecken herumgesprochen ...
Einfaches Sortieren von Tables mit jQuery Tabellen sind so etwas wie das persönliche Waterloo des Web-Entwicklers. Verpönt für das Design führt gerade im Backend in der Regel kein Weg an dem H...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.