nicht angemeldet
Hallo,
für die Website eines Fotografen, möchte ich gerne kontrollieren, wann welche Bilder geladen werden.
Die Seite besteht aus einem großen Bild und 16 kleinen, die per mouseover das grosse Bild verändern. Über eine preload-Funktion möchte ich die mouseover-Bilder laden, sobald die Seite aufgebaut ist. Ungefähr so:
-> lade das grosse Bild
-> zeige einen Ladebalken für das Laden der kleinen Bilder
-> lade die 16 kleinen Bilder
-> wenn die kleinen Bilder geladen sind, lade die 16 grossen Bilder (preload)
Das ganze versuche ich über eine while-Schleife zu realisieren, die solange wartet, bis das letzte kleine Bildelement geladen ist (habe keine andere Möglichkeit gefunden).
Mein Problem ist jetzt, dass der Browser den Container für die kleinen Bilder anzeigt, den Ladebalken versteckt und dann noch recht lange braucht, um die kleinen Bilder aufzubauen. So als würde die while-Schleife enden, obwohl noch nicht alle Bilder geladen sind. (Das passiert auch, wenn ich den Schutz gegen eine Endlosschleife ( && zaehler <= 50000000) rausnehme.
Habe erst vor 2 Monaten angefangen, mich mit HTML und Javascript zu befassen. Wenn also jemand eine Idee dazu hat oder einen Link bzw. Schlagwörter zu einer anderen Lösung, würde ich mich sehr freuen.
Schöne Grüße,
Wis
Hier noch die Idee als Code:
<script type="text/javascript" language="JavaScript"><!--
var ImageList = new Array();
ImageList[0] = "Bilder/IMG_001.jpg";
ImageList[1] = "Bilder/...
...ImageList[16] = "Bilder/IMG_016.jpg";
var Bilder = new Array();
function vorladen()
{for (i = 0; i < ImageList.length; i++){
var Bild = new Image();
Bild.src = ImageList[i];
Bilder[i] = Bild;
}
};
// --></script>
im body:
<div id="bild_gross">
<img id="IMG_gross" src="Bilder/IMG_001.jpg" alt="Bild" name="IMG_gross"></div>
<div id="loader">
<img id="loadergif" src="Bilder/loader.gif" name="loadergif"></div>
<div id="frame">
<a onmouseover="document.IMG_gross.src=Bilder[0].src"><img src="Bilder/klein/IMG_001_klein.jpg" alt="Bild" title="" style="float:left; margin:5px"></a>
<a onmouseover="document.IMG_gross.src=Bilder[1].src"><img src="Bilder/klein/IMG_002_klein.jpg" alt="Bild" title="" ...
... <a onmouseover="document.IMG_gross.src=Bilder[15].src"><img src="Bilder/klein/IMG_016_klein.jpg" alt="Bild" title="" style="margin:5px"></a>
</div>
und am Ende noch der Aufruf der Funktion:
<script type="text/javascript"><!--
document.getElementById("frame").style.visibility='hidden';
document.getElementById("loader").style.visibility='visible';
var zaehler = 1;
while (!(document.images[17].complete) && zaehler <= 50000000)
{zaehler++;
}
document.getElementById("loader").style.visibility='hidden';
document.getElementById("frame").style.visibility='visible';
vorladen();
// --></script>