I am implementing a very simple preloader page that is present until the main page content is fully loaded. The loading page works fine but I'm just having a small issue with the main page content showing momentarily before the preloader page is in place, resulting in an unsightly flash of content.
I have provided a live link below as it is difficult to replicate in a fiddle due to the need for load times, can anyone offer some insight into how to ensure the preloader page always loads first?
Thanks.
HTML
<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>
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
To make the browser wait to display the page until it's fully loaded with JavaScript, we run our code in the window. onload method. to set the body element to have opacity 0 initially. window.
$(window). on('load', function () { $("#coverScreen"). hide(); }); Above solution will be fine whenever the page is loading.
visible through css [ display:block; ] and make the rest of the page invisible through css[ display:none; ]. Once the loading is done, just make the loading invisible and the page visible again with the same technique. You can use the document. getElementById() to select the divs you want to change the display.
To make your preloader disappear once the page finishes loading: Add a new timed action that sets the opacity to 0%.
Set main
element to be hidden by default, and show it right before you fadeout the preloader:
main {
display: none;
}
$(window).load(function(){
$('main').show();
$('.preloader').fadeOut(500);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With