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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…