Eigenes "Bild Fehlt" Bild - Möglich?

[molily]

Guten Morgen, Andreas.

ist es mit Javascript möglich zu überprüfen ob ein Bild (auf einem anderen Server) erreichbar ist und - falls nicht ein anderes anzuzeigen.

Also sozusagen ein eigenes Fehlerbild wenn das Bild fehlt.

Mit new Image() kannst du ein Imageobjekt erzeugen, dem kannst du dann über die Eigenschaft src eine URL zuweisen, sodass der Browser einen HTTP-Request absendet. Falls die zurückgelieferte Datei ein Bild ist (das heißt der Content-Type image/* ist und der Browser den Datentyp versteht), kannst du daraufhin auf die Objekteigenschaften height und width zugreifen, welche größer als beziehungsweise ungleich Null sind, falls die Grafik erfolgreich geholt wurde.

<script type="text/javascript">
// <![CDATA[
// Erstelle neues Bildobjekt:
murks=new Image();
// Weise dem Objekt eine Bildquelladresse zu:
murks.src='http://selfhtml.teamone.de/src/logo.gif';
// Gebe die Größe aus (zur Veranschaulichung):
window.alert(murks.height+'/'+murks.width);
// Ändere die Quelladresse des Bildes, falls die URL stimmt:
if (murks.height>0) document.foo.src=murks.src;
// ]]>
</script>

Das zugehörige Markup:
<img src="fehlerbild.png" name="foo" alt="..." ... />

Das ist jedoch sehr problematisch, denn wenn JavaScript deaktiviert ist, sieht der Benutzer nur das Fehlerbild. Besser wäre, dass du die richtige Quelladresse anstatt des Fehlerbildes vorgibst und erst wenn das Bild nicht geladen werden kann die Fehlerbild-URL zuweist (zum Beispiel über onload):

if (document.foo.height>0) document.foo.src='fehlerbild.png';

Das height-Attribut darfst du in diesem Fall nicht vorgeben (AFAIK).

Möglicherweise nützt die Abfrage damit wenig, da der Benutzer zumindest kurz kein Bild sieht beziehungsweise ein "Bild nicht vorhanden"-Symbol bevor das Fehlerbild geladen ist. Sicherlich sind Verrenkungen möglich - zum Beispiel könnte man das Bild über visibility verstecken, bis die URL überprüft ist -, von denen ich dir aber abraten würde. JavaScript ist einmal wieder völlig unangebracht.

Die Referenz zu document.images: http://selfhtml.teamone.de/javascript/objekte/images.htm

Grüße,
Mathias