Das richtige Timing finden

Entscheidend ist das Timing

  1. JavaScript: Bilder richtig laden
  2. Entscheidend ist das Timing

In einer Schleife wird das im Parameter bild-Quellen übergebene Array durchlaufen.

for (var i = 0; i < bildQuellen.
length; i++) {
this.bilder[i] = document.create
Element("img");
this.bilder[i].onload = function()
{istGeladen(this,true);};
this.bilder[i].onerror = function()
{istGeladen(this,false);};
this.bilder[i].src = bildQuellen[i];
};

Dabei werden die img-Elemente erzeugt und der Konstruktoreigenschaft this.bilder zugewiesen.

this.bilder[i] = document.create
Element("img");

Der Ladevorgang des Grafikobjektes beginnt, wenn dem erzeugten img-Element eine entsprechende Ressource zugewiesen wird.

this.bilder[i].src = bildQuellen[i];

Den Ereignissen onload und onerror der img-Elemente wird eine Funktionsreferenz auf die innere Funktion istGeladen(bild, fehlerfrei) zugewiesen.

this.bilder[i].onload = function()
{istGeladen(this,true);};
this.bilder[i].onerror = function()
{istGeladen(this,false);};

new Image()

Zu beachten ist, dass das übergebene this in istGeladen(this,...) für das jeweilige Bild, für welches das Ereignis gefeuert wird, steht und nicht für das Konstruktorobjekt.Genau genommen wird die Funktionsreferenz auf eine anonyme Funktion gesetzt, die wiederum die Funktion istGeladen(bild, fehlerfrei) aufruft. Da istGeladen mit Parametern aufgerufen wird, kann die Referenz nicht direkt gesetzt werden.onload wird nach erfolgreichem, onerror nach fehlgeschlagenem Laden eines Grafikobjektes gefeuert. Um innerhalb von istGeladen die beiden Ereignisse zu unterscheiden, werden für den Parameter fehlerfrei entsprechend true oder false übergeben.

Entscheidend ist das Timing

Mit der Zuweisung einer Bildressource an die src-Eigenschaft beginnt der Ladevorgang. Das onload-Ereignis wird gefeuert, wenn der Ladevorgang abgeschlossen ist. Abgeschlossen heißt, dass sich das Bild im Arbeitsspeicher befindet, unabhängig davon, ob es aus dem Browsercache oder aus dem Internet geladen wurde. Falls das onload-Ereignis nach der src-Eigenschaft gesetzt wird, besteht die Gefahr, dass das Bild zu diesem Zeitpunkt bereits geladen ist und das onload-Ereignis nicht gefeuert wird. Das onload-Ereignis muss daher vor der src-Eigenschaft gesetzt werden. Dies gilt entsprechend für das onerror-Ereignis.

Die Ereignisfunktion istGeladen

istGeladen ist eine innere Funktion der Konstruktorfunktion LadeBilder. Sie benutzt zwei in der Konstruktorfunktion definierte Variablen.

function istGeladen(bild,
fehlerfrei) {
if (!fehlerfrei) {
bild.src = "Fehlerbild.gif";
};
if(++geladeneBilder == that.bilder.
length) {
starteFunktion();
};
};

Wird sie über das onerror-Ereignis aufgerufen, so wird dem entsprechenden img- Element ein Fehlerbild zugewiesen.Die if-Anweisung prüft, ob alle Bilder geladen sind. Dazu wird eine Zählervariable, die vor dem Vergleich um eins hochgezählt wird, mit der Anzahl der Bilder verglichen.

... ++geladeneBilder == that.bilder.
length ...

Die Zählervariable ist in der Konstruktorfunktion definiert.

var geladeneBilder = 0;

Innerhalb von istGeladen steht die implizite Variable this für das img-Element, welches die Funktion aufgerufen hat und nicht für das Konstruktorobjekt, hier im Beispiel meineBilder. In der Konstruktorfunktion wird deswegen eine Hilfsvariable definiert, die das Konstruktorobjekt repräsentiert und innerhalb von istGeladen verwendet wird.

var that = this;

Sind alle Bilder geladen, so wird die im Parameter starteFunktion übergebene Funktion gestartet:

starteFunktion();

Die complete-Eigenschaft

Man könnte das onload-Ereignis mit der complete-Eigenschaft kombinieren, um unabhängig vom Timing zu werden, denn, ist das Bild bereits geladen, kommt die complete-Eigenschaft zum Tragen, ansonsten das onload-Ereignis.

meinBild.src = "ich.gif";
if (meinBild.complete) {
meineFunktion(); //direkter
Funktionsaufruf!
} else {
meinBild.onload = meineFunktion;
//Funktionsreferenz!
};

Aber: Die Browser verhalten sich hier unterschiedlich, bei einigen bezieht sich die complete-Eigenschaft nicht auf die Bilder selbst, sondern auf den Ladevorgang. true bedeutet dann nur, der Ladevorgang ist abgeschlossen, unabhängig davon, ob das Bild auch geladen werden konnte.

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.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".