itch.io

Using HTML <template> Element = is modern compatible but also great to code editors.
The <template> element is a built-in HTML feature designed specifically for including template markup.

• Content inside the <template> tag is not rendered when the page loads, but can be manipulated by JavaScript, * like doing here:

<template id="loadingLightboxTemplate">
    <div class="lightbox loading_lightbox" style="display: none;">
        <div class="loader_outer">
            <div class="loader_label">Loading</div>
            <div class="loader_bar">
                <div class="loader_bar_slider"></div>
            </div>
        </div>
    </div>
</template>

<script>
    let eventsToListen = ['DOMContentLoaded', 'load'], eventsSet = new Set(),
        handleEvent = (e) => {
            eventsSet.add(e.type);
            window.removeEventListener(e.type, handleEvent);
            eventsToListen = eventsToListen.filter(event => event !== e.type);

            if (eventsSet.size === 2) {
                let lb = document.importNode(document.getElementById("loadingLightboxTemplate").content, true).firstChild;
                document.body.appendChild(lb).style.display = 'flex';

                setTimeout(() => {
                    lb.remove();
                    eventsSet.clear(); 
                    eventsSet = null; // Clean up eventsSet
                    lb = null; // Clean up lb
                    handleEvent = null; // Clean up handleEvent function
                    eventsToListen = null; // Clean up eventsToListen array
                }, 1000);
            }
        };

    eventsToListen.forEach(event => window.addEventListener(event, handleEvent));
</script>