Bilder vorladen

[Dean]

Hallo!

Bilder mit Javascript vorladen geschieht ja zumeist in einer Schleife, in der neue Imageobjekte erzeugt werden, z. B. so oder ähnlich:

for (i=0; i<bilder.length; i++) {
preload[i] = new Image();
preload[i].src = bilder[i];
}

Ich habe jetzt folgende Fragen bzw. Anforderungen (vereinfachte Darstellung):

1. Es sollen nicht alle Bilder im voraus geladen werden, sondern nur das jeweils nächste, damit bei einem Scrolling des angezeigten Bildes der Übergang weicher ist, also keine Schleife wie oben. Genau genommen werden eigentlich jeweils ein bis zwei Bilder dargestellt, aber das spielt hier keine Rolle.
2. Wenn ein Bilderwechsel erfolgt, also das angezeigte durch ein vorgeladenes ersetzt wird, wird ein neuer Preload unternommen.
3. Die Frage ist nun, lädt Javascript die Bilder synchron oder asynchron. Bezogen auf die Schleife oben: Erfolgt ein neuer Schleifendurchlauf erst, wenn das Bild im aktuellen Schleifendurchlauf komplett geladen ist? Das befürchte ich leider.
4. Wenn meine Vermutung zutrifft, werde ich das mit Timern lösen, oder hat jemand andere Vorschläge?
5. Nur zum Verständnis: Wenn die Schleife oben preload[1] einliest, hält dann der Interpreter die Bilddaten im Hauptspeicher, oder landen die Daten nur im Cache auf der Festplatte? Wenn sie im Hauptspeicher vorhanden sind, kann ich sie bei einem Bilderwechsel durch Überschreiben von preload[1] mit einem anderen Bild aus dem Speicher entsorgen, sie verbleiben aber im Cache?
6. Ich denke, AJAX ist in dem Fall keine wirkliche Alternative!?

[Struppi]

3. Die Frage ist nun, lädt Javascript die Bilder synchron oder asynchron. Bezogen auf die Schleife oben: Erfolgt ein neuer Schleifendurchlauf erst, wenn das Bild im aktuellen Schleifendurchlauf komplett geladen ist? Das befürchte ich leider.

asynchron. Sobal du ein Bild mit new Image() erzeugst und ihm eine Qeulle zuweist wird dieses geladen. Du kannst den Erfolg oder Mißerfolg mit onload/onerror abfragen.

Struppi.

[Dean]

asynchron.

Hi,

hundertprozentig sicher?

[Struppi]

asynchron.

Hi,

hundertprozentig sicher?

Ja.

Struppi.

[Dean]

asynchron.

Hi,

hundertprozentig sicher?

Ja.

Struppi.

Ok, wichtig wäre mir, noch eine Antwort auf 5.) zu bekommen. Kannst DU hierzu etwas sagen, da es um sehr große Bilder geht.

[Struppi]

Ok, wichtig wäre mir, noch eine Antwort auf 5.) zu bekommen. Kannst DU hierzu etwas sagen, da es um sehr große Bilder geht.

die Frage verstehe ich nicht.

Struppi.

[Kai345]

[latex]Mae  govannen![/latex]

1. Es sollen nicht alle Bilder im voraus geladen werden, sondern nur das jeweils nächste, damit bei einem Scrolling des angezeigten Bildes der Übergang weicher ist, also keine Schleife wie oben. Genau genommen werden eigentlich jeweils ein bis zwei Bilder dargestellt, aber das spielt hier keine Rolle.
2. Wenn ein Bilderwechsel erfolgt, also das angezeigte durch ein vorgeladenes ersetzt wird, wird ein neuer Preload unternommen.

Ich würde es so machen:

• Keine Preload-Schleife
• die aktuelle Bildnummer (Arrayindex) merken
• Das bilder[aktuelles+1] te Bild vorladen
• Nur beim Bildwechsel über ein passendes Event das jeweils nächste Bild bilder[counter+1] vorladen (Mit Abfrage, ob counter+1 > bilder.length) und die Bildnummer erhöhen.

Das gleiche kannst du auch nach unten machen, daß du z.B. das vorherige und/oder nächste Bild vorladen lässt.

Evtl. noch mal erweitert mit einem "Merker" pro Bild, ob es schon mal vorgeladen wurde.

Cü,

Kai