Page Loading Overlay

a simple vanilla js loading layer for page load.

Introduction

1. html

Add a layer element on top of the body-tag. The layer is invisible by the css-class "hidden". If the Browser support javascript, the script-block directly after the layer set the layer visible.

<div id="loadingscreen" class="hidden"></div>
<script type="text/javascript"> document.getElementById("loadingscreen").classList.remove("hidden")
</script>

2. Script

add a js-file or a script-block at the end of the page, witch hide the layer after page is loading.

<script type="text/javascript">
window.addEventListener( 'load', onPageLoaded, false );
window.addEventListener("pageshow", onPageShown, false);

/* special event handler for ios Safari */
function onPageShown(evt) {
    // check if the page has been loaded from cache entirely
    if (evt.persisted) {
        // emulate the page loaded event
        onPageLoaded();
    }
}

function onPageLoaded() {
    document.getElementById("loadingscreen").classList.add("hidden");
}
</script>

3. Optionals

Add optioal a Cancel link in the Layer with this click function to cancel manual the load animation

document.querySelector(".cancel").addEventListener('click', cancelLoading);

function cancelLoading(event) {
     event.preventDefault(event);

     // go on with what we have loaded by now
     onPageLoaded();
}

add optional the loading screen to link click events. Example.
This make only a sense if you use a translation effect to show the layer.

<script type="text/javascript">
document.querySelector("a.showLoadingScreen").addEventListener('click', showLoadingScreen);

function showLoadingScreen(event) {
    /* show the loading overlay if the user clicks on certain links without pressing ctrl-, alt-, shift- or cmd-key at the same time */
    if ((event.ctrlKey || event.altKey || event.shiftKey || event.metaKey))
        return;

    // hide the cancel button
document.querySelector(".cancel").classList.add("hidden");

    //show layer
    document.getElementById("loadingscreen").classList.remove("hidden");
}
</script>

Add the loading screen to ajax calls (jQuery for example).

<script type="text/javascript">
    $(document).ajaxSend(showLoadingScreen);
    $(document).ajaxStop(onPageLoaded);
</script>

Example content

These external images cause the page to load a bit longer and you can see the layer on this page.