Open top menu

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.

Keywords
Guido
Geschrieben von Guido

Guido Mühlwitz ist freier Webentwickler mit Schwerpunkt HTML5, PHP & MySQL. Wenn er sich nicht gerade bei Twitter über PHP aufregt, bloggt er über aktuelle Themen aus dem Bereich des Webworking.

Noch keine Kommentare.

Es hat noch niemand einen Kommanter zu diesem Artikel geschrieben.

Schreibe einen Kommentar