Greetings everyone, I have implemented this script (created by Niklaus Gerber) successfully, but there is a small issue. Upon setup, it initially covers the entire page with a div using CSS styles. Then, the script reveals the fully loaded site as intended, but it causes browsers with disabled JavaScript to experience infinite loading.
Does anyone have any suggestions on how to address this problem and make the website more user-friendly for those individuals? (Note that the website is not live yet).
Here is the code snippet:
$(window).load(function() {
$('#status').fadeOut();animation
$('#preloader').delay(350)\.fadeOut('slow');
$('body').delay(350).css({'overflow':'visible'});
})
Here is the HTML structure:
<div id="preloader">
<div id="status"> </div>
</div>
And here are the relevant CSS styles:
body {
overflow: scroll;
}
#preloader {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:#fff;
z-index:99;
}
#status {
width:200px;
height:200px;
position:absolute;
left:50%;
top:50%;
background-image:url(../img/status.gif);
background-repeat:no-repeat;
background-position:center;
margin:-100px 0 0 -100px;
}
Thank you in advance for any advice or suggestions.