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>

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

1 个答案: