Das richtige Timing finden JavaScript: Bilder richtig laden
© Internet Magazin
Grafiken für eine Webseite vorladen, ist mit ein paar Zeilen JavaScript eigentlich recht schnell getan. Vorladen ist aber noch lange nicht geladen und so kann es schnell zu einer bösen Überraschung kommen, wenn zu früh auf eine Grafik zugegriffen wird.
Dieser Artikel stellt Ihnen ein Objekt vor, mit dem eine beliebige Funktion erst gestartet wird, nachdem alle gewünschten Bilder vollständig geladen sind. Das Objekt kann leicht in die eigene Webseite integriert und dort beliebig oft verwendet werden. Die Verwendung des Objektes werden wir Ihnen am Beispiel einer einfachen Diashow demonstrieren.
Die Diashow
Die Variable diashow verweist auf ein img- Element <img id=“Diashow“ src=““/> im HTML-Quelltext.
Die innere Funktion bildwechsel ruft sich in einem Intervall von 1.000 Millisekunden selbst auf und tauscht dabei dann die Grafik aus.
Die Funktion bildwechsel darf erst gestartet werden, wenn alle Bilder geladen sind. Sie wird als zweiter Parameter an die Konstruktorfunktion LadeBilder übergeben.
Als erster Parameter wird eine globale Arrayvariable quellen übergeben, welche die Namen der Grafikdateien enthält.
Gegebenenfalls müssen die Dateinamen noch durch eine Verzeichnisangabe ergänzt werden. Der Zugriff auf die Bilder erfolgt über meineBilder.bilder, wie etwa in
Die Funktion meineDiashow darf erst gestartet werden, wenn die HTML-Seite geladen ist, da sie auf Elemente der HTML-Seite zugreift. Dies wird über das onload-Ereignis des body-Elementes realisiert.
Die Konstruktorfunktion des Objektes
Die Konstruktorfunktion LadeBilder hat die Aufgabe, die Bilder zu laden und wenn alle Bilder geladen sind, die gewünschte Funktion zu starten.
Es ist Konvention für Konstruktorfunktionen (LadeBilder) die UpperCamelCase-Schreibweise und für normale Funktionen (meine-Diashow) die lowerCamelCase-Schreibweise zu verwenden.
Die Bilder und die zu startende Funktion werden bei der Objekterzeugung als Parameter übergeben.
Bei der Initialisierung des Objektes erzeugt die Konstruktorfunktion aus den übergebenen Bildnamen img-Elemente und weist ihnen die Ereignisfunktion istGeladen zu. Über die Ereignisfunktion wird der Ladevorgang der Bilder kontrolliert und die übergebene Funktion gestartet.
Die Initialisierung des Objektes
Zunächst wird eine Eigenschaft in Form eines Arrays deklariert, welche die img- Elemente aufnimmt.
