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 & Single Page Websites Derzeit schwer im Trend sind Single Page Websites. Dies sind sie zwar schon länger, aber die "neuen" Single Page Websites enthalten durchaus einiges a...
Wie man AdBlock blockt, und warum AdBlock ist eine Extension für diverseste Browser, die durchaus ihre Daseinsberechtigung besitzt - zum Beispiel dann wenn ich auf der Startseite der T...
Inline Labels für Formularfelder „Normalerweise sollte man“ die Beschriftung für ein Input-Field immer mit dem Tag
HTML5 File Upload in jQuery Eine der sinnvollsten Erweiterungen von HTML5 (und wahrscheinlich auch die am meisten benutzte) ist der neue Datei-Upload. In der Vergangenheit war es...

Schreibe einen Kommentar

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