Bilder Preload

[Phil]

Hallo zusammen
Mittels JavaScript ändere ich in einem 10 Sekunden Intervall das src-Attribute eines image-Tags. Allerdings mache ich mir ein wenig Sorgen um die Ladezeit wenn das src-Attribute gewechselt wird.
Kann ich das Array mit den Urls der Bilder beim Aufruf der Webseite irgendwie preloaden oder cachen?
Was wäre die einfachste und effizienteste Lösung?
Vielen Dank für eure Hilfe!
Viele Grüsse, Philipp

[M.]

Mahlzeit,

Kann ich das Array mit den Urls der Bilder beim Aufruf der Webseite irgendwie preloaden oder cachen?

Kannst du, steht sogar in der Uralt-Version von Selfhtml.
Ob deine Besucher begeistert sind, wenn du evtl. unnütze Daten lädst, bezweifel ich. Immerhin haben mobile Internetzugänge sehr oft Traffic-Begrenzungen.

Was wäre die einfachste und effizienteste Lösung?

Ich würde nur das nächste Bild vorladen und nach Abschluss des Ladevorgangs das Bild austauschen.

[molily]

Hallo,

Kann ich das Array mit den Urls der Bilder beim Aufruf der Webseite irgendwie preloaden oder cachen?

Ja. Du kannst ein Image-Objekt erzeugen (unsichtbar, nicht im Dokument), es im Hintergrund die Bild-URL laden lassen, auf den load-Event warten und erst dann die src des tatsächlich sichtbaren Bildes austauschen:

var rotation = function() {  
  var srcs = ['a.jpg', 'b.jpg', 'c.jpg'];  
  var i = 0;  
  var loadImage = function() {  
    var image = new Image();  
    image.onload = loadHandler;  
    image.src = srcs[i];  
    i++;  
    setTimeout(loadImage, 9000);  
  };  
  var loadHandler = function() {  
    // Das neue Bild ist jetzt geladen, tausche das Original aus  
    document.getElementById('das-tatsächliche-bild').src = this.src;  
  };  
  loadImage();  
};  
rotation();

(ungetestet)

Siehe
http://de.selfhtml.org/javascript/objekte/images.htm
http://de.selfhtml.org/javascript/beispiele/buttons.htm
(Ziemlich veraltet, aber diese Grundlagen stimmen noch.)

Mathias

[Phil]

Vielen Dank für eure schnelle und tolle Hilfe. Funktioniert wunderbar!
Viele Grüsse, Philipp