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

Nivo – ultimativer Image Slider für jQuery Image Slider gibt es inzwischen wie Sand am Meer und irgendwie werden sie langsam langweilig! Letztendlich machen sie alle den gleichen Fade-Effekt un...
jFontSize – dynamische Font-Size mittels jQu... Ich entwickele zur Zeit einen Magento-Shop für Silver Surfer. Natürlich gibt es da besondere Ansprüche, und eine davon ist die klare Lesbarkeit der Se...
jQuery Terminal Emulator Ok, ich hör jetzt schon die Aufschreie: wer braucht so was!? Antwort: Jeder! :) Wovon sprechen wir hier überhaupt? Ein Terminal ist ein Kommandozeilen...
In jQuery Existenz prüfen Das praktische an jQuery ist (unter anderem) das es Aktionen auf ein Element nur dann ausführt, wenn das Element existiert. Wenn es nicht existiert: P...

Schreibe einen Kommentar

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