Ladezeiten versüssen - Ladestatus mit JS

Ich denke hat schon mal auf seiner Seite wichtige Informationen an Hand von Bildern und Grafiken hinterlegt. Das geht auf Kosten der Ladezeit. Der normale User bricht den Ladevorgang der Seite nach spätestens 5 sek. ab... und kommt nie wieder!

Was kann man dagegen tun? Nun, natürlich die Bilder komprimieren, Infos weglassen ...oder den Besucher beschäftigen.

Aber wie macht man das? Es reicht doch z.B schon zu wissen, wielange es noch dauern wird, bis die Seite komplett geladen ist. Für den Besucher wird die Ladezeit der Seite subjektiv verkürzt.

Wie gehts?

Wir machen zuerst eine Seite, in der alle Bilder vorab geladen werden, die auf der folgende Seite präsentiert werden. Erst wenn diese komplett geladen sind, kommt die Folgeseite.

Zuerts geben wir in einer Variablen die Folgeseite an:

infoseite = "info.html"

Dann teilen wir einer globalen Varaiblen mit, daß wir den Ladevorgang natürlich bei "0" beginnen wollen.

Bei jedem Bild, daß geladen wird, soll auch dieser Zähler demetnsprechend erhöht werden. In unserem Beispiel begnügen wir uns mit der Formel: 100/(Anzahl der Bilder)
als Wert für die Erhöhung bzw. für den Fortschritt des Ladens. Wenn der Wert 100 erreicht ist, wird auch die Folgeseite geladen.

function Bildladen (balken) {

    geladen += 20;
    laden (balken, geladen);

    if (geladen >= 100)
      window.location = infoseite;
}

Nun kümmern wir uns um den Fortschrittsbalken:
Zuerst stellen wir sicher, daß die Variable gültige Werte besitzt und erhöhen die Breite des Balkens.

function ladezeit (balkenanzeige, picfs) {

    if (picfs < 0)
      picfs = 0;

    if (picfs > 100)
      picfs = 100;

    if (document.images)
      balkenanzeige.width = picfs;
}

Mit dem event-handler onload teilen wir der Funktion Bildladen mit, daß die Variable geladen soweit erhöht wird bis der Wert 100 erreicht ist.

function Bildladen (balken) {

    geladen += 20;
    ladezeit (balken, geladen);

    if (geladen >= 100)
      window.location = infoseite;
}

Und hier der gesamte Code:

<html>
<head>
<script>

</script>
</head>

<body>

gleich ist es soweit...

<table width=102 border=1 cellspacing=0 cellpadding=0>
   <tr>
   <td bgcolor="red">
     <img src="ladebalken.gif" name="ladebalken" height=12 width=0>
   </td>
   </tr>
</table>
<img src="pic1.jpg" height=100 width=100 onLoad="Bildladen (ladebalken);">
<img src="pic2.jpg" height=100 width=100 onLoad="Bildladen (ladebalken);">
<img src="pic3.jpg" height=100 width=100 onLoad="Bildladen (ladebalken);">
<img src="pic4.jpg" height=100 width=100 onLoad="Bildladen (ladebalken);">
<img src="pic5.jpg" height=100 width=100 onLoad="Bildladen (ladebalken);">
</body>
</html>

TIPP: Verstecken Sie die Bilder , damit die Besucher von der Folgeseite richtig überrascht werden. Und geben sie dem Besucher ein bißchen was zu lesen...

Viel Spaß