Bild während dem laden des anderes Bildes

[lukgestach]

Hi,

Ich habe ein problem und zwar folgendes: Ich habe eine Galerie erstellt bei der man mit klick auf 2 Buttons die Bilder wechseln kann (Vorwärts und Rückwärts). Da das mit JS gemacht ist lädt es die Seite nicht neu, aber gerade bei langsameren I-net Verbindungen hat es sehr lange bis die Bilder geladen sind und man klickt dann nochmals drauf, wobei sich dann schon das übernächste Bild lädt!

Was will ich?
Das ist eig. recht simpel: Wenn man auf den Button klickt kommt ein kleineres Bild (load.gif) welches angezeigt wird bis das richtige, grosse Bild geladen ist!

Ich habe schon in Google gesucht, aber leider nichts gefunden!

Hier ist noch der Code vom Bilder aufrufen:

<script type="text/javascript">
    <!--
      // definiert das start-bild
      var bildnr = 1;
      // definiert die anzahl bilder
      var anzahlbilder = 28;
      function naechstesbild()
      {
        bildnr++;
        // hier wird geprüft ob die momentane bildnr die anzahl bilder übersteigt und wenn ja, wird zum ersten gesprungen
        if( bildnr > anzahlbilder )
          bildnr = 1;
        // hier wird nur das attribut ('src') des elements mit der id 'bild' angepasst
        document.getElementById('bild').setAttribute('src', 'chalet topas/' + bildnr + '.gif');
      }
    //-->
</script>

<!-- Hier die Ausgabe des Bildes //-->

<img id="bild" src="chalet topas/1.gif" width="400">

[Opendix]

http://forum.jswelt.de/javascript/40...g-geladen.html
http://forum.de.selfhtml.org/archiv/2003/11/t64461/

Ich denke aus diesen beiden Links solltest du dir dein gewolltest Ergebniss zusammenschustern können... wenn nicht, poste doch nochmals, dann kann man dir weiterhelfen ;)

[lukgestach]

Danke! Habs jetzt mit dem visibility gelöst!

Klappt jetzt wunderbar!

EDIT:

Im Firefox funzt es wie gesagt wunderbar, aber im IE wills nicht...

hier nochmals der vollständige Code:

<script type="text/javascript">
    <!--
      // definiert das start-bild
      var bildnr = 1;
      // definiert die anzahl bilder
      var anzahlbilder = 28;
      function naechstesbild()
      {
        bildnr++;
        // hier wird geprüft ob die momentane bildnr die anzahl bilder übersteigt und wenn ja, wird zum ersten gesprungen
        if( bildnr > anzahlbilder )
          bildnr = 1;
        // hier wird nur das attribut ('src') des elements mit der id 'bild' angepasst
        document.getElementById('bild').setAttribute('src', 'chalet topas/' + bildnr + '.gif');
        document.getElementById('bild').setAttribute('style', 'visibility:hidden');
        document.getElementById('load').setAttribute('style', 'visibility:visible');
      }
      function vorderesbild()
      {
      	bildnr--;
      	if( bildnr < 1 )
      	bildnr = anzahlbilder;
      	document.getElementById('bild').setAttribute('src', 'chalet topas/' + bildnr + '.gif');
      	document.getElementById('bild').setAttribute('style', 'visibility:hidden');
        document.getElementById('load').setAttribute('style', 'visibility:visible');
      }
      function visiblen()
      {
      	document.getElementById('load').setAttribute('style', 'visibility:hidden');
      	document.getElementById('bild').setAttribute('style', 'visibility:visible');
      }
    //-->
    </script>

<!-- Code zwischendrinn //-->
      <p align="center"><img id="load" src="load.gif" style="visibility:visible"><br><img id="bild" src="chalet topas/1.gif" width="400" style="visibility:hidden" onload="visiblen();"></p>

(Sehe gerade, dass man da noch ein wenig Code sparen könnte....)

Gruss Lukas