Improve lazy loading of elements

assets/site.js

@@ -1,3 +1,27 @@
+function xmr_media_lazyload_add_handler(element) {
+	element.addEventListener('play', (event) => {
+		let content = element.querySelector("noscript");
+		if (content) {
+			element.innerHTML = content.innerHTML;
+		}
+	});
+}
+function xmr_media_lazyload_initialize() {
+	new Promise((resolve, reject) => {
+		// Figure out what to load.
+		let elements = document.querySelectorAll(".block-media > [data-lazyload]");
+		let stack = Array.from(elements);
+		console.debug("Lazily loading " + stack.length + " elements...");
+
+		// Add a lazyloading handler to all entries.
+		for (let el of stack) {
+			xmr_media_lazyload_add_handler(el);
+		}
+
+		resolve();
+	});
+}
+
 (function() {
 	'use strict';
 
@@ -6,41 +30,6 @@
 		document.querySelector("#header #navigation").classList.toggle("open");
 	});
 
-	{ // Lazily load Media
-		let info = {}
-		new Promise((resolve, reject) => {
-			// Figure out what to load.
-			info.elements = document.querySelectorAll(".block-media > [data-lazyload]");
-			info.stack = Array.from(info.elements);
-			console.debug("Lazily loading " + info.stack.length + " elements...");
-
-			// Begin processing at 1ms intervals.
-			info.cbid = 0;
-			info.cbid = window.setInterval(() => {
-				let el = info.stack.pop();
-				if (el === undefined) {
-					reject();
-					return;
-				}
-				let lazycontent = el.querySelector("noscript");
-				if (lazycontent === undefined) {
-					reject();
-					return;
-				}
-				el.innerHTML = lazycontent.innerHTML;
-
-				if (info.stack.length == 0) {
-					window.clearInterval(info.cbid);
-					resolve();
-					return;
-				}
-			}, 1);
-		}).then(() => {
-			window.clearInterval(info.cbid);
-		}).catch(() => {
-		}).finally(() => {
-			console.debug("Lazy loading complete.");
-		});
-	}
-
+	// Lazily load Media
+	xmr_media_lazyload_initialize();
 })();