javascript - 如何在通过域名进入时只显示一次页面预加载器？

Question

所以，我在主页上有这样的 jQuery 页面预加载器:

<script type="text/javascript">
    $(window).load(function() {
        $("#preloader").delay(700).fadeOut("slow");
    })

<div id="preloader" class="preloader"></div>

这显示了 4 次:

1. 当我通过域名进入网站时；
2. 当我按 F5 刷新主页时；
3. 当我点击 Logo 时(当我点击它时我必须转到主页)；
4. 当我点击 «Home» 菜单项时。但我只想在前两次展示它。因此，我想到的第一个想法是删除 div 类，以便在我通过 JS 单击 Logo 或菜单项时不在整个页面上显示预加载器图像。并使用了这个:

document.getElementById("preloader").className = 'test';

但是后来...我意识到通过单击菜单项再次加载主页，我创建了文档的新副本，所以我的预加载器再次拥有他的类并出现了。所以，我决定使用 AJAX，而不是通过单击菜单项或 Logo 来重新加载整个页面。现在我用这个:

     <script type="text/javascript">
        $(document).ready(function(){
             $("#blog, #logo").click(function(){
                 $("#container").load("/blog");
                 document.getElementById("preloader").className = 'test';
             });
        });
    </script>

因此，当我单击 Logo 或菜单项时，我会在容器中加载名为 «blog» 的类别。我的侧边栏看起来像这样:

...        
<a href="javascript:;" id="logo"><i class="logo"></i></a>
...
<li class="m_blog"><a id="blog" href="javascript:;"><i class="icon"></i>Blog</a></li>
...

所以，它有效!预加载器仅在您通过域名打开网站时出现。但是出现了1个问题。当我打开“视频”类别时，我有这样的地址:mysite.com/video/

当我通过 Logo 或菜单返回主页时，我有相同的地址!因为内容加载没有重新加载整个页面和地址不会改变。我该如何解决？请帮帮我!我只想显示我的预加载器一次:当我通过域名或按 F5 刷新主页时。我已经头晕了，因为我只会HTML和CSS，但是今天开始学习AJAX和jQuery。帮我解决这个问题。

Answer 1

所以，我已经自己解决了问题。但是，无论如何，感谢@prabeen-giri 帮助我以正确的方式思考。首先，我需要解释一下预加载器机制。看看 CSS:

position: fixed;
display: block;
top: 0;    /* making preloader cover all screen */
right: 0;
left: 0;
bottom: 0;
background-repeat: no-repeat;
background-position:center; center;
background-size: auto auto;
background-image: url(../images/preload.png); /* your picture should be here */
background-color:#000; 
z-index:99; /* must be the highest number of all others to cover them all */

因此，您的预加载器只是一张图片或其他覆盖所有窗口并在加载全部内容时平滑消失(通过 jQuery)的东西。

<div id="preloader" class="preloader"></div>

这是脚本:

<script type="text/javascript">  
     $(window).load(function() {
          $("#preloader").delay(700).fadeOut("slow");}); 
</script>

为了解决我的问题并在通过域名进入站点时仅显示一次预加载器，我们需要使用 cookie。有 2 个 cookie 辅助函数(来自 Quirksmode ):

function createCookie(name,value,days) {
if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

所以，我们需要输入自己的cookie来为运行脚本创造条件。最初我们创建的 cookie 等于 null 并且这种相等性将成为运行脚本的条件。之后我们设置 cookie 一些值以不再启动 jQuery。这是代码:

<script type="text/javascript">  
    $(window).load(function() {
        if (readCookie('referer') == null){
            $("#preloader").delay(700).fadeOut("slow");}
        createCookie('referer',1,0);
     }); 
</script>

但是刷新页面后如何去掉我们的preloader图片和背景呢？因为我们只是根据条件禁用了 jQuery fadeOut 过程。图片和黑色背景一直覆盖着我们的窗口，不会消失...

让我们创建新条件并将其放入

<script>
    if (readCookie('referer') == null) {
        document.write("<style>.preloader {background-image: url(../images/preload.png); background-color:#000; z-index:99;}</style>");
    }
</script>

由此，我们将图像、z-index 和背景设置为预加载器类。仅当用户通过域名或清除他的 cookie 并刷新页面(这似乎不太可能)时，我们的 cookie 才等于null。如果 cookie 等于 1，正如我们上面设置的那样，我们的预加载器将显示但没有图片和背景，我们的 jQuery fadeOut 也不会运行!所以，我的问题如我所愿地解决了，预加载器只会出现一次。再次感谢@prabeen-giri!