 Preload und Ladeinfo anzeigen
Dieses Anwendungsbeispiel ermöglicht es eine Vorabinformation anzuzeigen, während der eigentliche Seiteninhalt noch geladen wird.
Nach Beendigung des Ladevorgangs (die Anfrage für das letzte Datenpaket an den Server ist abgeschickt), wird der Seiteninhalt angezeigt. Empfehlenswert für Seiten mit großen Bilddateien.
Funktion
Es wird ein Bildschirmfüllender Bereich definiert der auf 'sichtbar' oder 'unsichtbar' geschaltet werden kann. Zu Beginn ist der Bereich der Ladeinfo sichtbar, nach der Beendigung des Ladevorgangs versteckt.
Es versteht sich von selbst, dass das Datenvoulumen der Vorab-Info möglicht klein sein soll. Eine Textnachricht oder 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.
   
Images 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 Startseite mit allen Bildern usw.
Der Inhalt wird erst angezeigt, wenn alle Bilder geladen sind.
<!-- ENDE HAUPTSEITE -->
</body>
|
Home
BSP langsam 
ZURÜCK