christian: tabellen hintergrundbild ändern

hallo, ich habe mit folgender zeile ein hintergrundbild in eine tabelle geladen. ist allerdings ein platzhalter, damit schonmal ein verlauf da ist.

<td id="mainbg" style="height:520px; width:720px; background-image:url(daten/hg.gif); background-repeat:repeat-x;">

am ende des bodies möchte ich dieses bild nun austauschen, aber eben mit nem vorgeladenen bild , damit die tabelle nicht weiss wird

so funzt es aber nicht:
<head>
...
<script type="text/javascript">
hg = new Image(); hg.src="daten/bg_6b.jpg";
</script>
</head>
<body>
...
...
<script type="text/javascript">
 document.getElementById("mainbg").style.backgroundImage.src = hg.src;
 document.getElementById("mainbg").style.backgroundRepeat = "no-repeat";
</script>
</body>
</html>

wenn ich folgendes verwende wird das bild ausgetauscht, aber eben erst noch geladen also wird die tabelle weiss:

<script type="text/javascript">
 document.getElementById("mainbg").style.backgroundImage = "url(daten/bg_6b.jpg)";
 document.getElementById("mainbg").style.backgroundRepeat = "no-repeat";
</script>

wie kann ich denn nun ein bild vorausladen und dann im nachhinein den css-style backgroundImage austauschen?

  1. hi,

    document.getElementById("mainbg").style.backgroundImage.src = hg.src;

    Das ist Unfug.
    backgroundImage selber ist bereits eine Eigenschaft, und kein Objekt - hat also keine weiteren Eigenschaften unter sich.
    Und selbst wenn, gibt es bei der CSS-Eigenschaft background-image kein src-Attribut.

    wenn ich folgendes verwende wird das bild ausgetauscht, aber eben erst noch geladen also wird die tabelle weiss:
    document.getElementById("mainbg").style.backgroundImage = "url(daten/bg_6b.jpg)";

    Hast du das in allen getesteten Browsern festgestellt - oder nur im IE?

    wie kann ich denn nun ein bild vorausladen und dann im nachhinein den css-style backgroundImage austauschen?

    Sollte so wie beschrieben schon ausreichen - nur im IE könnte eine ungünstige Chaching-Einstellung wie üblich problematisch sein.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Hallo wahsaga & christian,

      Sollte so wie beschrieben schon ausreichen - nur im IE könnte eine ungünstige Chaching-Einstellung wie üblich problematisch sein.

      ich vermute, dass das Caching-Verhalten hier gar nicht so entscheidend ist. Vielmehr beschäftigt mich die Frage: Ist das eingangs angeforderte Hintergrundbild schon fertig geladen, wenn der Browser beim Rendern an dieser Stelle des Dokuments ankommt? Ich halte das für fragwürdig, denn ein Browser darf ja ruhig schon mit dem Rendern anfangen (falls er kann), solange der Rest des Dokuments noch geladen wird. Was, wenn der Request für das Bild noch irgendwo in der Warteschlange der HTTP-Requests steht und noch gar nicht bearbeitet ist?

      Sicherer erscheint mir daher, über ein setTimeout() in kurzen Intervallen nachzufragen, ob das angeforderte image-Objekt inzwischen fertig geladen ist (hg.complete), und erst *dann* das Hintergrundbild für die Tabelle zu setzen.

      So long,
       Martin

      --
      Die meisten Menschen werden früher oder später durch Computer ersetzt.
      Für manche würde aber auch schon ein einfacher Taschenrechner genügen.