"Grafik wird geladen" anzeigen

[jürgen]

Hallo Forumsgemeinde!

Zu Beginn ein großes Danke an euch für eure Hilfe und die Infos dieser Site selbst: nur dadurch hab ich es geschafft meine HOMEPAGE so herzurichten, dass sie meinen Vorstellungen entspricht. Für mich, der vor Monaten noch KEINERLEI Ahnung von HTML, Javascript und Co hatte ein wirklich großer Wurf ;-)

Ab sofort kommen nur noch Feintuning-Fragen von mir wie folgende:

Die Fotos haben trotz rel. geringer Dateigröße je nach Verbindungsgeschwindigkeit eine gewisse Aufbaudauer, sodass nach Klick auf den Pfeil für 1 Bild vorwärts zwar schon zahlenmäßig "Bild 5 von 13" angezeigt wird, das Bild selbst aber noch nicht geladen ist und der Benutzer dazu neigt, vorschnell nochmal auf den Pfeil zu drücken und dadurch oft Bilder übersprungen werden.

Die Bildergalerie selbst ist Javascript und jetzt würde ich gerne während des Ladevorganges ein .gif anzeigen lassen mit "Bild wird geladen" für die Ladezeit.

Hier der Code, auf dem die Galerie aufgebaut ist:

hier der Foto-Liste und die Funktionen für "erstes", "vorheriges", nächstes" und "letztes"
------------------------------------------------------------------------------------------

  <script language="JavaScript">  
images = new Array  
var i = 1  
images[1] = "fotos/kinder/kinder-01.jpg"  
images[2] = "fotos/kinder/kinder-02.jpg"  
images[3] = "fotos/kinder/kinder-03.jpg"  
images[4] = "fotos/kinder/kinder-04.jpg"  
images[5] = "fotos/kinder/kinder-05.jpg"  
images[6] = "fotos/kinder/kinder-06.jpg"  
images[7] = "fotos/kinder/kinder-07.jpg"  
images[8] = "fotos/kinder/kinder-08.jpg"  
images[9] = "fotos/kinder/kinder-09.jpg"  
AnzPic = (images.length-1);  
function firstimg(){  
i = 1  
document.img.src = images[i];  
document.getElementById('previous').value="";  
}  
function previmg()  
{  
if (i != 1)  
{  
i --  
document.img.src = images[i]  
}  
if (i == 1)  
document.getElementById('previous').value="";  
}  
function nextimg()  
{  
if (i != AnzPic)  
{  
i ++;  
document.img.src = images[i];  
}  
if (i ==AnzPic)  
document.getElementById('next').value="";  
}  
function lastimg()  
{  
i = AnzPic  
document.img.src = images[i];  
document.getElementById('next').value="";  
}  
  </script>  

hier die Anzeige des ersten Fotos mit Name "img" dass durch die obigen Funktionen immer ersetzt wird
------------------------------------------------------------------------------------------
<img
 style="border: 1px solid ;" alt="" name="img"
 src="fotos/kinder/kinder-01.jpg">

Wie würde sich sowas im Script verwirklichen lassen?

[Fragipani]

Hi, du kannst das gif einfach per CSS als Hintergrungbild
nehmen. Dann wird es angezeigt, solange das eigentliche
Bild noch nicht geladen ist. Wenn dann das Bild da ist, überdeckt es dein GIF

Gruss Fragipani

[jürgen]

Hi, du kannst das gif einfach per CSS als Hintergrungbild
nehmen. Dann wird es angezeigt, solange das eigentliche
Bild noch nicht geladen ist. Wenn dann das Bild da ist, überdeckt es dein GIF

Versucht - funktioniert nicht (Testseite:

  
  <style type="text/css">  
img {height: 400px; width: 400px; background-image:url(thumbs/ladezeit2.gif); background-repeat:no-repeat;}  
  </style>  

Achtet nicht auf die Verzerrung oder sonstiges. Und: die Fotos hab ich extra sehr groß gelassen um den erwünschten Ladebalken zu sehen. Is aber nix.

Ich hab stundenlang das Netz nach einer Lösung für eine Ladeanzeige während eines Grafikaufbaues gesucht, aber rein gar nichts entsprechendes gefunden.
In Flash ist sowas gang und gebe, seltsam, dass nicht mehr Foto-Galerie-Herzeiger sowas in JS oder sonstwas anscheinend versucht haben.

Naja, werd ich vll. die Fotos per JS einfach preloaden lassen - DAZU gibt´s unzähliges ;-)

Falls jmd. aber noch Ideen hat: Her damit!