fix long-idle cache miss that caused jarring transition

show.js

@@ -1,10 +1,9 @@
-"use strict";
+'use strict';
 (() => {
 	function Show(parent, files, delay) {
 		this.index = 0;
 		this.elapsed = 0;
 		this.playing = true;
-		this.loaded = false;
 		this.list = [];
 		this.updated = Date.now();
 		this.delay = !isNaN(delay) ? delay : 3000;
@@ -26,13 +25,11 @@
 	Show.prototype.toggle = function() { this.playing = !this.playing; };
 
 	Show.prototype.next = function() {
-		if (!this.loaded) return;
 		if (++this.index >= this.list.length) this.index = 0;
 		this.elapsed = 0;
 	 };
 
 	Show.prototype.prev = function() {
-		if (!this.loaded) return;
 		if (--this.index < 0) this.index = this.list.length-1;
 		this.elapsed = 0;
 	};
@@ -53,18 +50,17 @@
 	Show.prototype.preload = async function(file, delay) {
 		const o = { p: file };
 		if (o.p.endsWith('.mp4') || o.p.endsWith('.webm') || o.p.endsWith('.ogg')) {
-			let e = document.createElement('video');
-			e.addEventListener('error', () => { this.list.splice(this.list.indexOf(o), 1); }, {once: true});
-			e.addEventListener('canplay', () => { o.d = (isNaN(delay) ? 1 : delay) * e.duration * 1000; o.e = e; }, {once: true});
-			e.muted = true;
-			e.loop = true;
-			e.src = o.p;
+			o.e = document.createElement('video');
+			o.e.addEventListener('error', () => { this.list.splice(this.list.indexOf(o), 1); }, {once: true});
+			o.e.addEventListener('canplay', () => { o.d = (isNaN(delay) ? 1 : delay) * e.duration * 1000; }, {once: true});
+			o.e.muted = true;
+			o.e.loop = true;
+			o.e.src = o.p;
 		} else {
-			let e = document.createElement('img');
-			e.addEventListener('error', () => { this.list.splice(this.list.indexOf(o), 1); }, {once: true});
-			e.addEventListener('load', () => { o.e = e; }, {once: true});
+			o.e = document.createElement('img');
+			o.e.addEventListener('error', () => { this.list.splice(this.list.indexOf(o), 1); }, {once: true});
 			o.d = isNaN(delay) ? this.delay : delay;
-			e.src = o.p;
+			o.e.src = o.p;
 		}
 		this.list.push(o);
 	}
@@ -93,20 +89,22 @@
 	};
 
 	Show.prototype.render = function() {
+		if (!this.list.length) return;
 		let d = Date.now();
-		if (this.loaded) {
-			let o = this.list[this.index];
-			let vid = (o.e.tagName == 'VIDEO') ? 'video' : 'natural';
-			o.e.className = (o.e[vid+'Width'] / o.e[vid+'Height'] < this.parent.clientWidth / this.parent.clientHeight) ? 'fillheight' : 'fillwidth';
-			if (this.parent.firstChild !== o.e) {
-				let tmp = o.e.src; o.e.src = ''; o.e.src = tmp;
-				this.parent.replaceChild(o.e, this.parent.firstChild);
+		let o = this.list[this.index];
+		let vid = (o.e.tagName == 'VIDEO') ? 'video' : 'natural';
+		o.e.className = (o.e[vid+'Width'] / o.e[vid+'Height'] < this.parent.clientWidth / this.parent.clientHeight) ? 'fillheight' : 'fillwidth';
+		if (this.parent.firstChild !== o.e && !o.loading) {
+			o.loading = true;
+			let parent = this.parent;
+			o.e.addEventListener(vid === 'video' ? 'canplay' : 'load', () => {
+				parent.replaceChild(o.e, parent.firstChild);
 				if (vid === 'video') o.e.play();
-			}
-			if (this.playing && document.hasFocus() && (this.elapsed += (d - this.updated)) && this.elapsed >= o.d) this.next();
-		} else {
-			this.loaded = (this.list.length > 0) && this.list.every((l) => { return typeof l.e !== 'undefined'; });
+				delete o.loading
+			}, {once: true});
+			let tmp = o.e.src; o.e.src = ''; o.e.src = tmp;
 		}
+		if (this.playing && document.hasFocus() && (this.elapsed += (d - this.updated)) && this.elapsed >= o.d) this.next();
 		s.updated = d;
 		window.requestAnimationFrame(() => { this.render(); });
 	}