preload

templates/slideshow.html

@@ -207,6 +207,16 @@
             if(!document.fullscreenElement) reset_zoom();
         });
 
+        const PRELOAD_AHEAD = 3;
+        function preload_next() {
+            for (let k = 1; k <= PRELOAD_AHEAD; k++) {
+                const idx = shuffled
+                    ? order[(i + k) % order.length]
+                    : (i + k) % images.length;
+                new Image().src = images[idx];
+            }
+        }
+
         function show(n){
             if (shuffled) n = order[(n+order.length)%order.length];
             else          n = (n+images.length)%images.length;
@@ -216,6 +226,7 @@
             counter.textContent = `${i+1} / ${images.length}`;
             render_tags(n);
             reset_zoom();
+            preload_next();
             const p = new URLSearchParams(window.location.search);
             p.set('idx', i);
             history.replaceState(null,'','?'+p.toString());
@@ -225,6 +236,7 @@
         img.src = images[i];
         counter.textContent = `${i+1} / ${images.length}`;
         render_tags(i);
+        preload_next();
 
         function toggleShuffle(){
             shuffled = !shuffled;
@@ -249,7 +261,7 @@
             playing=!playing;
             btnT.textContent=playing?'Pause':'Play';
             if(playing){
-                const delaySec = parseInt(document.getElementById('delay').value, 10) || 15;
+                const delaySec = parseFloat(document.getElementById('delay').value) || 15;
                 timer = setInterval(next, delaySec * 1000);
             }
             else{