 Preloaderinfo - Ladeinfo anzeigen
Dieses Anwendungsbeispiel ermöglicht es eine Vorabinformation anzuzeigen, während der eigentliche Seiteninhalt noch geladen wird. Außerdem wird signalisiert, das der ladevorgan noch andauert.
|
|
Seite wird geladen - Preloaderinfo
Nach Beendigung des Ladevorgangs (die Anfrage für das letzte Datenpaket an den Server ist abgeschickt), wird die Ladeinfo ausgeblendet und der Seiteninhalt wird sichtbar. Empfehlenswert für Seiten mit großen Bilddateien.
Funktion
Ich mache mir das Leben leicht und überlagere den eigentlichen Seiteninhalt während des Ladevorgangs mit einem bildschirmfüllenden Bereich ( height="100%" width="100%"). Dieser definierte DIV-Bereich kann auf 'sichtbar' oder 'unsichtbar' geschaltet werden. Zu Beginn ist der Bereich mit der Ladeinfo sichtbar, nach der Beendigung des Ladevorgangs wird er ausgeblendet.
Rechts in der Grafik sehen Sie den schematischen Aufbau.
Es versteht sich von selbst, dass das Datenvoulumen der Vorab-Info möglicht klein sein soll. Eine Textnachricht (Seite wird geladen) und ein kleines animiertes Image sollte genügen.
|
|
Demo
Die Anzeigedauer der Lade-Info ist natürlich ahängig von der Übertragungsgeschwindigkeit des Datentransfers. Das bisher im Beispiel eingefügte Bild war 53 kB groß. In den Zeiten von DSL musste ich nun eine größere Bilddatei einbinden, damit Sie den Effekt auch beobachten können.
Öffnen Sie das Beispiel (Link oben) für eine Demo.
   
Grafiken für den Preloader-Bereich gefunden bei:  http://www.kneller-gifs.de
Im Head
<script type="text/javascript" language="JavaScript">
<!-- Original: Gilbert Davis -->
<!-- Begin
function LadeInfo() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hidepage').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hidepage.visibility = 'hidden';
}
else { // IE 4
document.all.hidepage.style.visibility = 'hidden';
}
}
}
// End -->
</script>
Der Body der HTML-Datei
<body OnLoad="LadeInfo()">
<!-- PRELOADER -->
<div id="hidepage"
style="position: absolute;
left:0px;
top:0px;
background-color: #253E6C;
layer-background-color: #253E6C;
height: 100%;
width: 100%;">
<table height="100%" width="100%" align="center">
<tr><td valign="middle" align="center">
Page loading ... Please wait<br><br>
Seite wird geladen ... bitte warten<br>
</td></tr></table>
</div>
<!-- ENDE PRELOADER -->
<!-- HAUPTSEITE -->
Hier den Inhalt der Seite mit Text, Bildern usw.
Dieser Bereich wird erst sichtbar,
wenn alle Seiteninhalte (also auch Bilder) geladen sind.
<!-- ENDE HAUPTSEITE -->
</body>
|
Home • JavaScript • Diverses • Vorladen
BSP 1
