diff --git a/assets/site.js b/assets/site.js index cf22225..9711d68 100644 --- a/assets/site.js +++ b/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(); })();