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.

  1. JavaScript: Bilder richtig laden
  2. Entscheidend ist das Timing
internet, webdesign, javascript, grafiken, website

© Internet Magazin

internet, webdesign, javascript, grafiken, website

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 = [];

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Film Amazon Prime Instant Video Warner Bros Emily Browning
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im Oktober mit Highlights wie "Sucker Punch", "Fifty Shades of Grey", "Spotlight" und der zweiten Staffel von "Ash vs. Evil…