如何只显示一次网站预加载器 [英] How to show website preloader only once

问题描述

我在网站上添加了预加载器，并且每次访问该网站时都会播放预加载器动画.我希望它在访问域名时每次访问只能播放一次-对网站上的主页按钮或浏览器中的后退按钮的任何单击，我都希望跳过预加载器.我希望它在新标签页或新浏览器窗口中打开时随时显示.我尝试添加Cookie，但是我仍然无法以某种方式正确连接它.

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.

要添加的一些内容: 预加载器由css @keyframes(.loader)组成-它不是.gif.

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

我的网站的域名为 jonrouse.com 供参考.

My site's domain is jonrouse.com 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.

推荐答案

下面是一个示例，说明如何使用sessionStorage在每个选项卡或窗口每次访问时显示一次预加载器.

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>

这篇关于如何只显示一次网站预加载器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！