I added a preloader to my website and the preloader animation will play every time the site is visited. I would like it to only play once per visit when going through the domain name - any clicks on the home button on the site or back button in the browser I would like to have the preloader skipped. I would like it to show up any time it is opened in a new tab, or new browser window. I tried adding cookies, but i'm still not connecting it correctly somehow.

Some things to add: The preloader is made of css @keyframes, (.loader) - its not a .gif.

My site's domain is jonrouse for reference.

HTML

<div class="preloader">
   <div class="loader">
        <div class="loader-inner"></div>
   </div>
</div>

CSS

.preloader {
    display:block;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:99;
    margin:0 auto;
}

JS

<script type="text/javascript">
    $(document).ready(function() {
        $(window).load(function() {
            function Preloader() {
                var preloader = $ ('.loader');
                preloader.delay(1000) .fadeOut (500);
                var preloader = $('.preloader');
                preloader.delay (1500) .slideUp(500);
            }
            Preloader();
        });
    });
</script>

Any help would be greatly appreciated. If you need any extra info, let me know.

I added a preloader to my website and the preloader animation will play every time the site is visited. I would like it to only play once per visit when going through the domain name - any clicks on the home button on the site or back button in the browser I would like to have the preloader skipped. I would like it to show up any time it is opened in a new tab, or new browser window. I tried adding cookies, but i'm still not connecting it correctly somehow.

Some things to add: The preloader is made of css @keyframes, (.loader) - its not a .gif.

My site's domain is jonrouse. for reference.

HTML

<div class="preloader">
   <div class="loader">
        <div class="loader-inner"></div>
   </div>
</div>

CSS

.preloader {
    display:block;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:99;
    margin:0 auto;
}

JS

<script type="text/javascript">
    $(document).ready(function() {
        $(window).load(function() {
            function Preloader() {
                var preloader = $ ('.loader');
                preloader.delay(1000) .fadeOut (500);
                var preloader = $('.preloader');
                preloader.delay (1500) .slideUp(500);
            }
            Preloader();
        });
    });
</script>

Any help would be greatly appreciated. If you need any extra info, let me know.

• javascript
• jquery
• html
• css

• You said you tried using cookies, but I don't see anything in your javascript to that effect. Also for the clarity of the readers, can you elaborate on the length of time, or the actions taken, that denote for you when a visit starts and stops? – Taplar Commented Jan 2, 2018 at 1:27
• The loader exists for one reason: expensive data processing (images, css, javascript, Etc). Why do you want to hide the loader? If the second time a user visits your page, the assets will be cached by the browsers for example. – Ele Commented Jan 2, 2018 at 1:33
• @Taplar I've clarified what I consider a visit - and as for the cookies, i'm not certain how to write it out inside of the jQuery. Each time I try, it doesn't appear to do anything (other than break the code, making the preload last forever). – Jonathan Rouse Commented Jan 2, 2018 at 1:36
• You've stated when the loader should not show. You haven't stated when it should show again. If they leave the site plete and e back, should the loader show again? If they close the browser, open it again, and go to your website should it show again? If they are on your page, but open another tab and also go to your page should the loader show again? – Taplar Commented Jan 2, 2018 at 1:43
• @EleazarEnrique In this instance the loader is being used aesthetically as an intro transition into the site. I do want it to be viewed each time the viewer opens the site from it's domain, like with a new tab or browser. – Jonathan Rouse Commented Jan 2, 2018 at 1:46

1 Answer 1

Here is an example of how you might use sessionStorage to show the preloader once per visit per tab or window.

<script type="text/javascript">
$(document).ready(function() {
    $(window).load(function() {
        function Preloader() {
            var preloader = $ ('.loader');
            preloader.delay(1000) .fadeOut (500);
            var preloader = $('.preloader');
            preloader.delay (1500) .slideUp(500);
        }
        if ( ! sessionStorage.getItem( 'doNotShow' ) ) {
            sessionStorage.setItem( 'doNotShow', 'true' );
            Preloader();
        } else {
           $ ('.loader, .preloader').hide();
        }
    });
});
</script>