Phil: Bessere Performance bei Bilder-Diashow

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

  1. Nabend!

    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?

    Ich denke das könnte dich interessieren.

    Bernd

    1. Guten Abend,

      Ich denke das könnte dich interessieren.

      Tatsächlich, ich denke das passt.

      var bilder_pfad = [];
      bilder_pfad.push('C:\\Users\\Phil\\Pictures\\bild1.jpg');
      bilder_pfad.push('C:\\Users\\Phil\\Pictures\\bild2.jpg');
      var bilder = [];
      for (var i = 0, l = bilder_pfad.length; i < l; i++)
        {
        bilder[i] = new Image();
        bilder[i].src = bilder_pfad[i];
        }
      

      Dazu habe ich aber noch einige Fragen:

      1. Sollte man eher "new Image()" verwenden oder "document.createElement('img')"?

      2. Auf der Seite wird gesagt: „Mit JavaScript werden die Grafiken durch JavaScript-Anweisungen dem Browser als Elemente der Seite bekannt gemacht. Dabei werden die Grafiken bereits in den internen Speicher des Browsers geladen aber noch nicht angezeigt.“ Meine Frage ist nun: was passiert wenn ich F5 drücke - also die Seite neulade? Sind die Grafiken dann immernoch im "internen Speicher des Browsers" oder erst nachdem das Script wieder durchgelaufen ist?

      3. Wie sollte ich nun mit next() das neue Bild anzeigen? Kann ich immernoch über img.src = bilder_pfad[pos] gehen (die Bilder sind doch nun im "internen Speicher") oder muss ich das img aus dem Dokument entfernen und das neue aus bilder[pos] wieder einfügen?

      LG Phil

      1. Hallo Phil,

        du hast betont, dass die Diashow lokal auf einem Rechner läuft.

        Da muss ich mal fragen, ob die Dia-Show per "vor-laden" im Vollbild-Modus nun ruckelfrei läuft.

        Im Web finde ich das Vor-laden aller Bildern unsinnig, denn wenn die Show gar nicht gestartet oder abgebrochen wird, war das Laden der ungesehenen Bilder vergeblich.

        Es gibt die Möglichkeit, nur das nächste Bild vorzuladen, während ein Bild gezeigt wird. Und nur dann weiterzuschalten, wenn das vorgeladene Bild vollständig eingetroffen ist.

        Hier warte ich, bis ein Bild eingetroffen ist. Allerdings benötige ich nur die Höhe des Bildes:

        setHeight.js

        Linuchs

        1. Hallo,

          du hast betont, dass die Diashow lokal auf einem Rechner läuft. Da muss ich mal fragen, ob die Dia-Show per "vor-laden" im Vollbild-Modus nun ruckelfrei läuft.

          Ich habe nun ziemlich viel rumgetestet und das Ergebnis ist alles andere als befridigend. Kann es sein, dass ich irgendetwas „falsch“ mache, oder „muss“ das so sein:

          Ich habe hier ein kleines Vorlade-Script erstellt:

          img = document.getElementById('img');
          bilder_pfad = [];
          bilder_pfad.push('C:\\Users\\Phil\\Pictures\\bild1.jpg');
          bilder_pfad.push('C:\\Users\\Phil\\Pictures\\bild2.jpg');
          pos = -1;
          preload = [];
          for (var i = 0; i < 15; i++)
            {
            preload[i] = new Image();
            preload[i].src = 'file:///' + bilder_pfad[i];
            preload[i].id = 'img';
            }
          document.addEventListener('keyup', function(e) {
              if (e.key.toLowerCase() == 'o')
                {
                ((pos + 1) >= preload.length) ? pos = 0 : pos++;
                document.replaceChild(preload[pos], img);
                img = preload[pos];
                }
          });
          

          Die Sache ist nun die, dass es nun gar nicht so läuft wie ich erhofft hatte. Wenn ich dieses „Vorlade“-Script mit dem „Normalen“-Script vergleiche, dann muss ich sagen, dass die beiden sich beinahe in nichts nachstehen. Es ist schwer einzuschätzen ob das Vorlade-Script wirklich besser ist oder eher schlechter. Manchmal kommt es beim Vorlade-Script dazu, dass auch mal kein Bild angezeigt wird; dann schaue ich im Inspektor nach und dort steht „Grafik konnte nicht geladen werden“ - eigenartig...

          Nichtsdestotrotz bekomme ich folgendes einfach nicht hin. Folgende Situation: Ich drücke auf F5 - Reload, alles auf Anfang. Wenn ich nun mit der (normalen) next() Funktion durch die Bilder gehe brauchen diese (ein Momentchen) bis sie komplett angezeigt werden. Wenn ich nun mit einer prev() Funktion wieder zurück gehe werden die Bilder augenblicklich komplett angezeigt. Kein kleinstes Momentchen vergeht - sie sind sofort da.

          Ich möchte nun genau das hinbekommen. Das Bild, das bei einem Aufruf von next() angezeigt wird, soll sofort erscheinen - eben - wie oben geschildert - als wäre es schon mal angezeigt worden. Und das bekomme ich mit der sogenannten „Preload“-Funktion (s.o.) nicht hin.

          Hinweise wie ich die Bilder >>sofort<< angezeigt bekommen kann und auch andere Vorschläge sind herzlich Wilkommen.

          LG Phil

  2. Hallo,

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

    warum nimmst du dann nicht ein Bildanzeigeprogramm, die gibts wie Sand am Meer, und man muss schon sehr suchen, um eins zu finden, das keine Slideshowfunktion mitbringt...

    Gruß
    Kalk

    1. Hallo,

      warum nimmst du dann nicht ein Bildanzeigeprogramm, die gibts wie Sand am Meer, und man muss schon sehr suchen, um eins zu finden, das keine Slideshowfunktion mitbringt...

      Sagen wir's so: es läuft noch lokal. Wenn es lokal wie gewünscht klappt kann man ja schauen wie man es umsetzen kann. Momentan geht es mir nur um das Prinzip.

      LG Phil