Andreas: Eigenes "Bild Fehlt" Bild - Möglich?

Hallo,

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.

Viele Grüße
Andreas

  1. Hi,

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

    wie schon oft gesagt wurde: JavaScript hat nur (höchstens) Zugriff auf das, was der Browser liefert. Die Grafik muss also erst geladen werden, bevor entschieden werden kann, ob sie _korrekt_ geladen wurde. Mehr dazu findest Du im Archiv.

    Cheatah

    --
    X-Will-Answer-Email: No
  2. 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

    --
    "Die größten Kritiker der Elche waren früher selber welche"
    (Prof. Fritz Weigle alias F. W. Bernstein)
    Stimme für eine Übergangslösung für Benutzerstylesheets!
    http://cforum.teamone.de/phpbt/bug.php?op=show&bugid=36 Vote NOW! ;)
  3. Hi 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.

    Ob es einen Serverfehler gibt, aber mit clientmethoden könntest du volgendes machen:

    <html>
    <body>
    <script type="text/javascript">
    function fehlerbild() {
       var fehler = new Image()
       fehler.src='nopicture.jpg'
       document.images[0].src = fehler.src
    }
    </script>
    <img src="bild1.jpg" onError="fehlerbild()">
    </body>
    </html>

    Mit onError wird abgefragt, ob mit dem bild was nicht stimmt. Ob diese methode nebenwirkungen hat, weiss ich nicht.
    Fals du nicht genug von Js verstehst, [0] ist die nummer des bildes im dokument, erstes bild hat die nummer 0...

    Grüße aus Düsseldorf,

    --
    Aleksej