javascript - 如何只显示一次网站预加载器

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>