diff options
| -rw-r--r-- | public/js/slideshow.js | 13 |
1 files changed, 8 insertions, 5 deletions
diff --git a/public/js/slideshow.js b/public/js/slideshow.js index b8e2a11..d1a0a95 100644 --- a/public/js/slideshow.js +++ b/public/js/slideshow.js @@ -27,7 +27,7 @@ function ssInterval() { return (parseFloat(document.getElementById('ss-interval').value) || 4) * 1000; } -function ssShow(i, instant) { +function ssShow(i, instant, onShown) { const e = ssQueue[i]; if (!e) return; ssIdx = i; @@ -36,16 +36,18 @@ function ssShow(i, instant) { cap.textContent = e.caption || ''; ctr.textContent = `${i + 1} / ${ssQueue.length}`; + const done = () => { applyEntry(e); onShown?.(); }; + if (instant) { applyEntry(e); return; } if (e.type === 'video') { - crossFade(() => applyEntry(e)); + crossFade(done); } else { const preload = new Image(); - preload.onload = preload.onerror = () => crossFade(() => applyEntry(e)); + preload.onload = preload.onerror = () => crossFade(done); preload.src = e.src; } } @@ -78,9 +80,10 @@ function crossFade(cb) { function ssSchedule() { clearTimeout(ssTimer); if (ssPlaying && ssQueue.length > 1) { + // Start the next timer only after the photo is actually visible (post-preload + // + post-crossfade), so each photo gets a full interval on screen. ssTimer = setTimeout(() => { - ssShow((ssIdx + 1) % ssQueue.length); - ssSchedule(); + ssShow((ssIdx + 1) % ssQueue.length, false, ssSchedule); }, ssInterval()); } } |