brauchbar.de - WebDesign, Programmierung,Development in HTML, CSS, Javascript, PHP, Perl und mehr

[ Startseite | Artikel : HTML · JavaScript · CSS · Perl · Usability · Sonstiges | Services | Über ]


verwandte Artikel und Seiten

Warteseiten und Vorlader

von Thomas Salvador.

Eigentlich sollten Webs ja zügig laden, denn alles, was zu langsam ist, kostet einen Besucher. Niemand wartet gerne und schon gar nicht online, weil es hier auch noch besonders offensichtlich Geld kostet.

Manchmal lässt es sich eine gewisse Ladezeit jedoch nicht umgehen, was oft zu einem guten Teil durch Bilder bedingt ist. Sind diese wirklich erforderlich und lassen sie sich nicht weiter optimieren, so müssen Sie eben so geladen werden.

Was hier gerne gemacht wird ist, eine Art Warteseite darzustellen.

Eine solche Seite ist immer sehr kompakt, erscheint selbst also blitzartig und gibt dem Besucher etwas zu sehen oder zu lesen. Während der Besucher nun beschäftigt ist, lädt man die Bilder der Hauptseite vor. Ist dies geschehen, schaltet man auf die Hauptseite um, die nun zügig erscheint, weil die Bilder jetzt (da vorgeladen) aus dem Cache kommen. (s. auch Hinweise).

Wie kann man das erreichen?

Es gibt mehrere Ansätze, wovon ich die meisten als das berühmte 'mit Kanonen auf Spatzen schießen' bezeichne und somit als unbrauchbar klassifiziere.

Dieses Problem lässt sich in reinem HTML mit einem minimalen Schuß JavaScript lösen, mehr ist nicht erforderlich.

Die Basics

Sie wissen natürlich, dass man in HTML Bilder mit dem <img> Tag lädt. Wenn nicht, können Sie das rasch in dem entsprechenden Kapitel meines HTML-Kurses nachblättern.

<img src="bild.gif" width="100" height="100" />

Es ist nun so, dass man ein Bild nur einmal laden muss, um es in den Cache des Browsers zu bringen. Dabei spielt insbesondere die Ausdehnung keine Rolle, so dass es nahe liegt, die vozuladenen Bilder als Punkte zu verstecken.

<img src="bild.gif" width="1" height="1" />

Natürlich surfen die Besucher mit unterschiedlicher Geschwindigkeit, was von Modem, sowie Netz- und Serverlast abhängt. Man muss also erkennen, wann das Vorladen beendet ist, weil man sonst zu früh abbricht oder jemanden zu lange warten lässt.

Wir haben bei unseren JavaScripten schon häufiger den onload-Event des <body>-Tag verwendet, der feuert, wenn die HTML Seite geladen ist. Für ein Beispiel, können Sie einen beliebigen Ticker aus dem JavaScript WorkShop II nehmen.

Die Lösung

Nun gibt es auch einen onload-Event für den <img>-Tag der vollkommen analog feuert, wenn das Bild geladen ist.
<img src="bild.gif" width="1" height="1" onload="fertig();" />

Der Rest ist nun einfach und die konsequente Anwendung des Verfügbaren.

Wir verstecken auf unserer Warteseite alle Bilder, die wir vorladen möchten und zählen die Anzahl der onload-Events, die gefeuert haben. Wenn diese Zahl gleich der Zahl der vorzuladenen Bilder ist, sind alle geladen und es kann weitergehen.

Die Hinweise

Wie wir alle wissen, kann es Server- oder Netzprobleme geben, so dass mal etwas nicht ladbar ist.

Aus diesem Grunde sollte man den onerror-Event, der feuert, wenn das Bild nicht geladen werden kann oder sonst korrupt ist (kurz: wenn ein Fehler auftritt) - wir hatten ihn in Fehlerbehandlung mit JavaScript kennengelernt - wie das Eintreten von onload zählen. Wenn man zu früh umschaltet, sind nicht alle Bilder geladen und werden dann geladen, was erträglich ist. Wenn man aber gar nicht umschaltet, bleibt der Besucher dort hängen und das ist inakzeptabel.

Aus diesem Grunde könnte man in einem letzten Schritt das Umschalten auf die Hauptseite auch zeitgesteuert vorsehen, so dass der Besucher, wenn alle Stricke reißen, nach längerer Pause weitergeleitet wird, auch wenn das Vorladen ausnahmsweise nicht funktioniert haben sollte.

Wie Sie vielleicht schon an der Formulierung gemerkt haben, ist es selbstverständlich nicht notwendig und auch nicht ratsam, immer alle Bilder vorzuladen. Was zu lange in der Hauptseite dauert, dauert auch zu lange in der Warteseite. Meine Empfehlung ist: Verteilen Sie die Ladezeit auf beide Seiten.

Der Source

Nachfolgend eine sehr einfache, aber vollständige Warteseite. Sie gibt nur einen kurzen Text aus. Sie sehen oben ein Initialisierung der Variablen i auf den Wert 0.

Die Funktion load() wird jeweils aufgerufen, wenn eine vorzuladene Grafik geladen ist. Sie erhöht i um 1. Ist i=8, so wurden alle Grafiken geladen. Der Browser wird mit location.href="haupt.html"; angewiesen, die genannte Datei zu laden.

Der hervorgehobene else-Zweig, der einen alert() enthält, dient lediglich als Feedback, wenn Sie das lokal testen. Er erzeugt jeweils eine Nachrichten-Box, wenn load() aufgerufen wurde. Der gesamte else-Zweig wird natürlich nicht wirklich benötigt und sollte vor dem Upload gelöscht werden.

<html><head><script type="text/javascript"><--
var i=0;

function load() {
  i++;
  if (i==8) {
    location.href="haupt.html";
  } else { alert(i+'...');}
}
//-->
</script>
</head><body>

Ich bin die Warteseite.
Wenn die Bilder geladen sind, geht es zu haupt.html

<img src="../brauchbar/images/bb-button.gif"
    width="1" height="1" border="0" alt="" onload="load();">
<img src="../brauchbar/images/bb-button2.gif"
    width="1" height="1" border="0" alt="" onload="load();">
<img src="../brauchbar/images/bb-button3.gif"
    width="1" height="1" border="0" alt="" onload="load();">
<img src="../brauchbar/images/bb-button4.gif"
    width="1" height="1" border="0" alt="" onload="load();">
<img src="../brauchbar/images/bb-button5.gif"
    width="1" height="1" border="0" alt="" onload="load();">
<img src="../brauchbar/images/bb-button6.gif"
    width="1" height="1" border="0" alt="" onload="load();">
<img src="../brauchbar/images/bb-button7.gif"
    width="1" height="1" border="0" alt="" onload="load();">
<img src="../brauchbar/images/bb-button8.gif"
    width="1" height="1" border="0" alt="" onload="load();">

</body></html>

Diese Version verfährt nicht gemäß den Hinweisen. Um dies zu machen, müßten die <img>-Tags erweitert werden etwa zu

<img src="../brauchbar/images/bb-button.gif"
    width="1" height="1" border="0" alt="" onload="load();" onerror="load();">

Verwandte Artikel und Seiten



brauchbar web
Diese Site anlinken. Artikel zu CSS | HTML | JavaScript | Perl | Usability | Sonst. | nach Ausgabe.

Copyright © 1999-2015 Thomas Salvador und brauchbar.de . Alle Rechte vorbehalten. Gehostet bei all-inkl.
Reproduktion, ganz oder in Teilen, nur mit schriftlicher Zustimmung von Thomas Salvador. Impressum · Datenschutzerklärung · Kontakt.

zum Inhaltsverzeichnis der 22. Ausgabe.

Linken Sie bitte zu der festen Adresse http://www.brauchbar.de/wd/artikel/61.html .