6

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

dungey_140
  • 2,602
  • 7
  • 34
  • 68

1 Answers1

2

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);
});
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • Thanks @rory-mccrossan. This is causing some display issues when my content does appear, have experimented with using .animate opacity instead of .show which works well, I'm a little concerned about performance however. Will continue to explore – dungey_140 Oct 27 '15 at 11:48
  • Hi @rory-mccrossan. I've added a second part to my above question, do you have any suggestions how to amend your code to suit? – dungey_140 Oct 29 '15 at 00:05
  • I would suggest you start a new question for that. – Rory McCrossan Oct 29 '15 at 08:51