CODEWITHSUNDEEP
jqueryhtml
Brandon Vaughn
Brandon Vaughn

Reputation: 23

Show splash screen once per session with jQuery... homepage "flashing" during load

I am trying to make an intro/splash screen appear only once per session on my homepage. I do have it working with the script below but it "flashes" the homepage quickly before running the splash/intro on the initial site load (subsequent site loads do not show the div as wanted/needed)

I have a div with a class of .splash_section hidden initially & I am running the script included below.

Question: Is there a better way to write the script, or simply a way to prevent the homepage or body from quickly "flashing" before the intro shows?

$(document).ready(function(){

if (sessionStorage.getItem('splash') !== 'true') {
$('.splash_section').show()
sessionStorage.setItem('splash','true');
}

});

Thanks for any help in advance.

Upvotes: 2

Views: 3441

Answers (2)

Shomz
Shomz

Reputation: 37701

Since $(document).ready callback fires when all the page elements are parsed, your best bet is to put the splash element at the very top of the body and run the script with that function right after it. That way it will load the meta data from the head, load the splash content and display it right away before any other DOM elements are loaded.

Something like this: 

<body>
    <div class="splash_section"></div>
    <script>
    if (sessionStorage.getItem('splash') !== 'true') {
        $('.splash_section').show()
        sessionStorage.setItem('splash','true');
    }
    </script>
    ...

Upvotes: 0

Vince
Vince

Reputation: 3286

I would also hide the content of the home page initially, using css:

.home-page {
    display: none;
}

Then change your script to:

$(document).ready(function(){

    if (sessionStorage.getItem('splash') !== 'true') {
        $('.splash_section').show();
        sessionStorage.setItem('splash','true');
    }
    else {
        $('.home-page').fadeIn();
    }    
});

Upvotes: 3

Related Questions