|
|
Der Einsatz von vielen Grafiken in einer Webseite hat, verursacht durch die benötigte Ladezeit, den hässlichen Nebeneffekt, daß sich
die Seite Stück für Stück aufbaut.
Um diesen Effekt zu abzustellen, wird oftmals versucht, die enthaltenen Grafiken mit Javascript vorab zu laden.
Wie man Grafiken mit Javascript lädt, ist unter der Fragestellung "Wie ersetze ich in meiner Webseite eine Grafik durch eine andere" näher erläutert.
Grundsätzlich muss man sagen, daß es mit Javascript nicht möglich ist, einen echten Preloader zu erzeugen, da es abgesehen vom Internet-Explorer
für keinen Browser eine verlässliche Methode gibt, zu ermitteln, inwieweit und ob eine Grafik geladen wurde.
Dies ist auch nicht nötig, da der onload - Event von window signalisiert, dass der Fensterinhalt incl. der darin enthaltenen Objekte
fertig geladen wurde.
Es reicht also völlig aus, den Seiteninhalt so lange zu verbergen, bis dieses Ereignis eintritt:
Beispiel:
Verbergen des Dokument bis zum Onload-Event
(500kB)
Quelltext des Skriptes:
 |
|
|
|
<script type="text/javascript">
<!--
function zeigeDokument()
{
document.getElementsByTagName('body')[0].style.visibility='visible';
}
if(document.getElementsByTagName)
{
document.writeln('<style type="text/css"><!--');
document.writeln('body{visibility:hidden;}');
document.writeln('--></style>');
window.onload=zeigeDokument;
}
//-->
</script>
|
|
|
|
|
Erläuterung:
Die Seite enthält ein Bild, welches aufgrund der Grösse in 35 Einzelgrafiken gesliced wurde.
Damit diese Grafik sich nicht teilweise aufbaut, sondern erst im Endzustand angezeigt wurde, soll das Skript die Seite bis dahinn verbergen.
Dazu wird mit Javascript ein <style> - Element in das Dokument geschrieben, welches die visibility des <body> auf hidden stellt.
Dies wird mit Javascript und nicht auf dem herkömmlichen Weg getan, da dies Besucher mit deaktiviertem Javascript ausschliessen würde.
Beim Onload - Event des Fensters wird sodann die visibility des <body> auf visible geändert.
|
|
