I recently added a preloader to my website, but I'm having trouble getting it to only play once per visit. Ideally, I want the animation to show up when the site is opened in a new tab or browser window, but not when navigating through the domain by clicking on the home button or using the back button. I attempted to use cookies to achieve this, but for some reason, it's not working as intended.
Here are some details about the preloader: It is created using CSS @keyframes and it is not a .gif file.
If you need a reference, my website's domain is jonrouse.com.
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>
I would really appreciate any help with resolving this issue. Feel free to ask if you need any additional information.