Display splash/preloader screen once per visit

[benyates1]

I have an animated splash screen which displays the site logo and a spinning icon… The purpose of which isn’t really to preload but just show the logo for a specific duration before allowing access to the site.

Currently the preloader appears on every page load - how can I get it it to display just once per visit regardless of what page the user enters on?

jQuery code:

<script type="text/javascript">
        // makes sure the whole site is loaded
        jQuery(window).load(function() {
                // will first fade out the loading animation
            jQuery("#status").delay(1500).fadeOut("slow");
                // will fade out the whole DIV that covers the website.
            jQuery("#preloader").delay(2000).fadeOut("slow");
        })
    </script>

[m3g4p0p]

Hi @benyates1, you might set a flag to the session storage, like

if (!sessionStorage.isVisited) {
  sessionStorage.isVisited = 'true'
  $(window).load(/* ... */)
}

Although I do have to say that such a loading splash for 2s without actually loading anything seems a bit pointless and mildly annoying to me. :-P

[benyates1]

I take your point about being annoying. It’s part of a progressive web app.

How would I incorporate the setting of the flag in my code - I’ve tried substituting /…/ in your example for the code from my original post but it still shows on every page load.

[m3g4p0p]

Yeah sorry, that wasn’t meant too seriously – you certainly have your reasons.

@benyates1

How would I incorporate the setting of the flag in my code - I’ve tried substituting /…/ in your example for the code from my original post but it still shows on every page load.

Ah yes, you’re actually hiding that splash in the .load() callback. Try it the other way round (and w/o the onload listener, just at the bottom of the body):

if (!sessionStorage.isVisited) {
  sessionStorage.isVisited = 'true'
  $("#status").show().delay(1500).fadeOut("slow")
  $("#preloader").show().delay(2000).fadeOut("slow")
}

or:

if (!sessionStorage.isVisited) {
  sessionStorage.isVisited = 'true'
  $("#status").delay(1500).fadeOut("slow")
  $("#preloader").delay(2000).fadeOut("slow")
} else {
  $("#status").hide()
  $("#preloader").hide()
}

[benyates1]

Thanks for the help but I still can’t get it it work.

I’ve tried both snippets of code and the only change I can see is it now flashes on screen very breifly but still prior to every page load. It’s not limiting itself to just one display per visit.

Is the code you supplied just checking to see if there is a flag and then displaying or hiding - do i need to set a flag first?

[m3g4p0p]

@benyates1

it now flashes on screen very breifly

Yes, you’d have to set it to display: none; initially then in your CSS… here’s a pen (try to reload or rerun it to see the effect).

@benyates1

Is the code you supplied just checking to see if there is a flag and then displaying or hiding - do i need to set a flag first?

If the flag isn’t set it evaluates to false in the if condition, so you don’t need any initial value. But BTW, you can reset the session storage by typing sessionStorage.clear() in the console.

[benyates1]

@m3g4p0p

if (!sessionStorage.isVisited) {
sessionStorage.isVisited = ‘true’
$(“#status”).delay(1500).fadeOut(“slow”)
$(“#preloader”).delay(2000).fadeOut(“slow”)
} else {
$(“#status”).hide()
$(“#preloader”).hide()
}

Thanks - I still can’t get it to work, the pen works and is exactly what I am looking for. Could the fact that I am on a localhost environment (XAMPP) be stopping it working correctly?

[m3g4p0p]

@benyates1

Could the fact that I am on a localhost environment (XAMPP) be stopping it working correctly?

No, the session storage is a mere browser thing. Can you reproduce the problem in a demo page, or maybe post a “working page” that I could just copy/paste in my editor? It doesn’t have to be the entire page of course, just the relevant bits that show how it doesn’t work.

[benyates1]

So here is where I started from - https://codepen.io/anon/pen/WOweVo. It doesn’t appear to be functioning in the pen - I’m really not sure what is goin, your snippets work fine, my preloader works in my testing environment (although displaying on every load).

I’ve tried to use just the snippets you have provided and although it works the preloader content isn’t showing.

[m3g4p0p]

Check the console – you’re getting a type error. This is because the [.load()](http://api.jquery.com/load-event/) method was removed with jQuery 3.0. You might use .on('load', fn) instead, but again, I don’t think you need it here at all – just put your JS at the bottom of the body so that it executes when the DOM content is loaded.

[benyates1]

@m3g4p0p

sessionStorage.clear()

Thanks! Finally got it working

[benyates1]

Sorry - one last question… Is there a way to stop scrolling whilst the preloader is displayed - currently it can be scrolled past and looks a bit naff.

I was using the following code before;

$(function() {
    setTimeout(function() {
        $('html, body')
            .css({
                'overflow': 'auto'
            })
            //.animate({
            //    scrollTop: $('.myDiv').offset().top
            //}, 2100);
    }, 2100);
});

But that doesn’t work now if the sessionStorage flag is true.

And could you just explain if isVisited is unique to this script or can be reused for other things within the same project?

[m3g4p0p]

@benyates1

But that doesn’t work now if the sessionStorage flag is true.

I’m afraid I don’t see a relation to the session storage here… could you again set up a pen? ^^

@benyates1

And could you just explain if isVisited is unique to this script or can be reused for other things within the same project?

Yes, you can use it anywhere – the session storage is globally available on your site.

[benyates1]

@m3g4p0p

I’m afraid I don’t see a relation to the session storage here… could you again set up a pen? ^^

Thanks.

I have set up a pen at https://codepen.io/anon/pen/ZyWGqy, this is the working splash complete with disabled scroll. It works fine. But if I was to click a link and navigate to another page the splash element would not show (which is perfect) but the scrolling will still be disabled.

The way I’m disabling the scrolling is by setting atimeout function to change the overflow property of the HTML css after a similar duration to what the splash page is shown for.

[m3g4p0p]

Ah okay… well, just place the timeout inside the !sessionStorage.isVisited as well.

[benyates1]

@m3g4p0p

Ah okay… well, just place the timeout inside the !sessionStorage.isVisited as well.

I have tried that. It doesn’t work because for that to work I have to set the overflow for the html element to hidden so if the flag is true, it doesn’t display the splash screen but it also won’t change the overflow property.

[m3g4p0p]

@benyates1

It doesn’t work because for that to work I have to set the overflow for the html element to hidden

Just set the overflow to hidden when showing the splash then, rather than with CSS:

if (!sessionStorage.isVisited) {
  sessionStorage.isVisited = 'true'

  $('.preload-content').show().delay(2200).fadeOut('slow')
  $('.splash').show().delay(3000).fadeOut('slow')
  $('html, body').css({ 'overflow': 'hidden' 
                      })
  setTimeout(function() {
    $('html, body').css({ 'overflow': 'auto' })
  }, 2100);
}

[benyates1]

@m3g4p0p

$(‘.preload-content’).show().delay(2200).fadeOut(‘slow’)
$(‘.splash’).show().delay(3000).fadeOut(‘slow’)
$(‘html, body’).css({ ‘overflow’: ‘hidden’
})
setTimeout(function() {
$(‘html, body’).css({ ‘overflow’: ‘auto’ })
}, 2100);
}

Of course… apologies . Thanks for all of your help.

[m3g4p0p]

No worries. ;-)