Das richtige Timing finden
JavaScript: Bilder richtig laden
Bilder peppen die Website auf. Wir zeigen Ihnen, wie Sie mit JavaScipt schnell und einfach Grafiken vollständig laden.
- JavaScript: Bilder richtig laden
- Entscheidend ist das Timing
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.
function meineDiashow() {
var aktivesBild = 0;
var diashow = document.
getElementById("Diashow");
var interval = undefined;
function bildwechsel() {
diashow.src = meineBilder.
bilder[aktivesBild].src;
(aktivesBild==meineBilder.bilder.
length-1)
?aktivesBild=0:aktivesBild++;
window.clearInterval(interval);
interval = window.setInterval
(bildwechsel, 1000);
};
var meineBilder = new LadeBilder
(quellen, bildwechsel);
};
Die Funktion bildwechsel darf erst gestartet werden, wenn alle Bilder geladen sind. Sie wird als zweiter Parameter an die Konstruktorfunktion LadeBilder übergeben.
var meineBilder = new LadeBilder
(quellen, bildwechsel);
Als erster Parameter wird eine globale Arrayvariable quellen übergeben, welche die Namen der Grafikdateien enthält.
var quellen = ["Belgien.gif",
"GibtEsNicht.gif", "Deutschland.gif",
"Frankreich.gif"];
Gegebenenfalls müssen die Dateinamen noch durch eine Verzeichnisangabe ergänzt werden. Der Zugriff auf die Bilder erfolgt über meineBilder.bilder, wie etwa in
diashow.src = meineBilder.bilder
[aktivesBild].src;
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.
<body onload="meineDiashow()">
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.
function LadeBilder(bildQuellen,
starteFunktion) {...};
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.
var meineBilder = new LadeBilder
(quellen, bildwechsel);
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.
this.bilder = []; 
