Currently, I am working on a straightforward preloader page that remains visible until the main content of the page is completely loaded. Despite the functionality of the loading page, my main concern lies in the quick display of the main content before the preloader page appears, causing an unattractive flash of content.
In order to better understand the issue and provide assistance, I have included a live link below as it is challenging to replicate in a fiddle due to load times. Can anyone share insights on how to ensure that the preloader page consistently loads first?
Your help would be greatly appreciated!
Here's a snippet of the code:
<div class='preloader'>
<div class="preloader-logo">Logo</div>
<div class="preloader-loading-icon">Loading</div>
</div>
<main>Content goes here, should be hidden initially until fully loaded.</main>
And the corresponding CSS:
.preloader {
display: block;
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
z-index: 9999;
background: rgba(255,102,51,1);
}
.preloader-logo {
background: url(images/ui-sprite.svg) no-repeat 0 -300px;
position: absolute;
width: 140px;
height: 58px;
top: 50%;
left: 50%;
text-indent: -9999px;
}
.preloader-loading-icon {
background: url(images/preloader-loading.svg) no-repeat 50%;
text-indent: -9999px;
position: relative;
top: 50%;
left: 50%;
margin-top: 90px;
width: 40px;
height: 40px;
}
JS
/* Preloader Splash */
$(window).load(function(){
$('.preloader').fadeOut(500);
});
Link