如何仅显示一次网站预加载器

Question

我在我的网站上添加了一个预加载器，每次访问该网站时都会播放预加载器动画。我希望它在浏览域名时每次访问只播放一次 - 任何点击网站上的主页按钮或浏览器中的后退按钮我希望跳过预加载器。我希望它在新选项卡或新浏览器窗口中打开时显示。我尝试添加 cookie，但我仍然无法以某种方式正确连接它。

补充几点： 预加载器由 css @keyframes (.loader) 组成 - 它不是 .gif。

我的网站域是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>

任何帮助将不胜感激。如果您需要任何额外信息，请告诉我。

Answer 1

这是一个示例，说明您如何使用 sessionStorage 在每个标签或窗口每次访问时显示一次预加载器。

<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>