jürgen: "Grafik wird geladen" anzeigen

Beitrag lesen

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?