I'm currently working on incorporating a loader into my website that should remain visible throughout the entire loading process. For example, if the load time is around 6.8 seconds (with 6.3 seconds of waiting and 0.4 seconds of downloading), I want the loader to be displayed for the full 6.8 seconds. However, at the moment, it only appears during the last few seconds.
Below is my code:
<div id="tpa-preloader"></div>
CSS:
#mk-boxed-layout{ display: none; }
#tpa-preloader{
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:url(/preloader.gif) no-repeat #FFFFFF 50%;
-moz-background-size:148px 128px;
-o-background-size:148px 128px;
-webkit-background-size:148px 128px;
background-size:148px 128px;
z-index: 99998;
width:100%;
height:100%;
}
JavaScript:
function onReady(callback) {
var intervalID = window.setInterval(checkReady, 1000);
function checkReady() {
if (document.getElementsByTagName('body')[0] !== undefined) {
window.clearInterval(intervalID);
callback.call(this);
}
}
}
function show(id, value) {
document.getElementById(id).style.display = value ? 'block' : 'none';
}
onReady(function () {
show('mk-boxed-layout', true);
show('tpa-preloader', false);
});
Visit my website here:
Is there a way to ensure that the tpa-preloader remains visible for the entirety of the 6.8 second load time starting from the beginning of the loading process?
Appreciate any help in advance!