a simple vanilla js loading layer for page load.
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>
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>
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>
These external images cause the page to load a bit longer and you can see the layer on this page.