Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Force page preloader to appear before any content

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

like image 262
dungey_140 Avatar asked Oct 27 '15 11:10

dungey_140


People also ask

How can I make the browser wait to display the page until it's fully loaded?

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.

How do you show page loading Div until the page has finished loading?

$(window). on('load', function () { $("#coverScreen"). hide(); }); Above solution will be fine whenever the page is loading.

How do I display a loading screen while site content loads?

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.

How do you make preloader disappear?

To make your preloader disappear once the page finishes loading: Add a new timed action that sets the opacity to 0%.


1 Answers

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);
});
like image 114
Rory McCrossan Avatar answered Oct 06 '22 08:10

Rory McCrossan