Preloading mit dem Javascript-Image-Objekt

Nun kann man darangehen, die geschilderten Schritte zu einer wirklichen Anwendung zusammenzustellen. Hier folgt ein kurzer Code-Abschnitt: eine Menüleiste aus Schaltflächen (Image-Links), von denen jede einen von drei Zuständen annehmen kann – Normal, Hover und Klick. Da jede der Schaltflächen mehrere Zustände annehmen kann, ist ein Preloading der Bilder erforderlich, um sicherzustellen, dass das Menü schnell auf Zustandsänderungen reagiert. Der Code in Listing A zeigt dies.

Der HTML-Code in Listing A erstellt eine Menüleiste, die aus vier Schaltflächen besteht, von denen jede einen von drei Zuständen annehmen kann: Normal, Hover und Klick. Die Anforderungen lauten wie folgt:

• Bei der Mausbewegung über eine Schaltfläche im Normal-Zustand (onMouseOver) wechselt diese in den Hover-Status. Zeigt der Mauszeiger nicht mehr auf die Schaltfläche (onMouseOut), wechselt diese in den Normal-Status zurück.
• Beim Klicken auf eine Schaltfläche (onClick) wechselt diese in den Klick-Status. In diesem Zustand verbleibt die Schaltfläche bis eine andere Schaltfläche angeklickt wird.
• Wenn eine Schaltfläche angeklickt wurde, darf sich keine andere Schaltfläche im Klick-Zustand befinden. Andere Schaltflächen können sich nur im Hover- oder Normal-Zustand befinden.
• Es kann jeweils nur eine Schaltfläche angeklickt werden.
• Jeweils nur eine Schaltfläche kann sich im Hover-Status befinden.

Die erste Aufgabe besteht in der Einrichtung von Arrays, welche die Bilder für jeden Status des Menüs enthalten. Die <img>-Elemente, die diesen Array-Elementen entsprechen, werden ebenfalls im Body des HTML-Dokuments erstellt und der Reihe nach benannt. Man beachte, dass der Index der Array-Werte bei 0 anfängt, während die entsprechenden <img>-Elemente mit 1 beginnend benannt sind, wodurch in der zweiten Hälfte des Scripts einige Berechnungen erforderlich werden.

Die Funktion preloadImages() sorgt für das Laden aller Bilder in den Cache, so dass die Reaktionszeit auf Bewegungen des Mauszeigers minimiert wird. Eine for()-Schleife wird zum Wiederholen der erzeugten Bilder eingesetzt und lädt diese im Voraus.

Die Funktion resetAll() ist eine bequeme Möglichkeit um alle Bilder in den Normal-Zustand zurückzusetzen. Dies ist notwendig, da alle Schaltflächen im Menü wieder ihren Normal-Zustand annehmen müssen, ehe die angeklickte Schaltfläche in den Klick-Status wechseln kann.

Die Funktionen setNormal(), setHover() und setClick() sorgen dafür, dass die zugehörige Datei zu einem bestimmten Bild entsprechend des jeweiligen Zustands geändert wird (wobei die Bildnummer als Funktionsargument übergeben wird). Da angeklickte Bilder in ihrem Zustand verbleiben müssen bis ein anderes Bild angeklickt wird (siehe Regel Nr. 2), sind sie zeitweise gegenüber den Mausbewegungen immun. Daher enthalten die Funktionen setNormal() und setHover() einen Code, der dafür sorgt, dass der Zustand einer Schaltfläche nur dann geändert wird, wenn diese sich noch nicht im Klick-Zustand befindet.

Das Beispiel ist nur eine von vielen Möglichkeiten, wie man mithilfe von Preloading die Reaktionszeit von Javascript-Effekten verkürzen kann. Die beschriebenen Verfahren kann man mit entsprechenden Anpassungen auf allen Webseiten anwenden.