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).
Analog könnten Sie auch für Diashows oder Bannerrotationen zum Beispiel die jeweils nächste laden, damit diese bereits vorliegt, und der Besucher nicht auf das Laden warten muss und eine blanke Stelle sieht.
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 HTML mit einem minimalen Schuß JavaScript lösen, mehr ist nicht erforderlich.
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 2 nehmen.
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.
Das Weitergehen geschieht durch das Setzen der (gewünschten) Adresse als location:
location.href="zu ladender URL";
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 wie den onload-Event werten.
Den onerror-Event hatten wir in Fehlerbehandlung mit JavaScript kennengelernt und feuert, wenn ein Fehler aufgetreten ist.
Zwar heiß das hier, dass das Bild nicht geladen werden konnte oder andersweitig korrupt ist, aber insbesondere auch, dass das Laden dieses Bildes beendet ist.
<img src="bild.gif" width="1" height="1" onload="fertig();" onerror="fertig();" />
Zählen wir das nicht, würden wir nicht erkennen, dass Vorladen beendet ist, und würde nicht mehr umschalten.
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.
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 count() wird jeweils aufgerufen, wenn der Vorgang für diese Grafik beendet ist, also
Sie erhöht i um 1. Ist der Wert (hier) 8, so wurden alle Grafiken geladen. Der Browser wird mit
location.href="haupt.html";
angewiesen, die genannte Datei zu laden.
Der else-Zweig, der einen alert() enthält, dient lediglich als Feedback, wenn Sie das lokal testen.
Er erzeugt jeweils eine Nachrichten-Box, wenn count() 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 count() { i++; if (i==8) { location.href="haupt.html"; } else { alert(i+'...'); } // zum Testen } //--> </script> </head><body> Ich bin die Warteseite. Wenn die Bilder geladen sind, geht es zu haupt.html <img src="/images/bb-button.gif" width="1" height="1" border="0" alt="" onload="count();" onerror="count();" /> <img src="/images/bb-button2.gif" width="1" height="1" border="0" alt="" onload="count();" onerror="count();" /> <img src="/images/bb-button3.gif" width="1" height="1" border="0" alt="" onload="count();" onerror="count();" /> <img src="/images/bb-button4.gif" width="1" height="1" border="0" alt="" onload="count();" onerror="count();" /> <img src="/images/bb-button5.gif" width="1" height="1" border="0" alt="" onload="count();" onerror="count();" /> <img src="/images/bb-button6.gif" width="1" height="1" border="0" alt="" onload="count();" onerror="count();" /> <img src="/images/bb-button7.gif" width="1" height="1" border="0" alt="" onload="count();" onerror="count();" /> <img src="/images/bb-button8.gif" width="1" height="1" border="0" alt="" onload="count();" onerror="count();" /> </body></html>
Sie sehen hier auch deutlich: Würden wir bei einer Grafik nicht auf onerror reagieren, würden wir bei einem Fehler dort nicht hochzählen, würden wir nie die erwartete 8 erreichen und nie weiterleiten.