Bessere Performance bei Bilder-Diashow

[Phil]

Guten Abend,

ich habe mir in letzter Zeit eine kleine Galerie erstellt. Gestern habe ich eine Diashow-Option hinzugefügt. Rein technisch funktioniert diese auch ganz gut. Beim testen bin ich aber auf ein Szenario gestoßen, bei dem ich finde, dass man da noch dran arbeiten müsste. Und zwar folgendes: wenn man F11 drückt - ==> Fullscreen-Modus - und dann die Diashow startet kommt es - bei kleineren Bildern seltener - bei größeren Bildern umso öfter - dazu, dass der Browser ein „Weilchen“ - verglichen mit der Zeit zwischen dem Bilderwechsel - braucht um das Bild anzuzeigen. Befindet man sich nicht im Fullscreen-Modus wird das nächste Bild (zuverlässig) sofort angezeigt. Meine Idee wäre, dass man das nächste Bild - oder sogar die nächsten - in der Reihe sozusagen „vorladen“ tut - oder sowas ähnliches.

So sieht das Schema bei mir aus:

// Ein Array in dem die Pfade zu den Bildern gespeichert sind
var bilder = [];
bilder.push('C:\\Users\\Phil\\Pictures\\bild1.jpg');
bilder.push('C:\\Users\\Phil\\Pictures\\bild2.jpg');
// etc.

// Variable in der die aktuelle Position gespeichert wird. -1 damit bei next() nicht bilder[0] übersprungen wird
var pos = -1;

// Eine Referenz auf das img-Element
var img = document.getElementById('myImg');

// Eine Funktion die das nächste Bild anzeigt
function next() {
  ((pos + 1) >= bilder.length) ? pos = 0 : pos++;
  img.src = bilder[pos];
}

// Und schließlich die Diashow-Funktion
var slideshow = null;
function slideshowStart() {
  slideshow = setInterval(next, 3000);
}
function slideshowStop() {
  clearInterval(slideshow);
  slideshow = null;
}

Was meint Ihr zu meinem Problem? Tendiert Ihr auch zu einem Bilder-Vorladen? Oder wie/womit würdet ihr es lösen? Wie funktioniert ein Bilder-Vorladen überhaupt?

P.S: das ganze läuft lokal auf meinem Lappi ab

LG Phil