如何在通过域名输入时仅显示一次页面预加载器？

所以，我在主页上有 jQuery 页面预加载器，如下所示：

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

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

这显示了 4 次：

1. 当我通过域名进入网站时；
2. 当我按F5刷新主页时；
3. 当我单击徽标时（单击该徽标时我必须转到主页）；
4. 当我单击“主页”菜单项时。 但我只想在前两次展示它。 所以，我想到的第一个想法就是删除div当我通过 JS 单击徽标或菜单项时，类不会在整个页面上显示预加载器图像。并使用过这个：

document.getElementById("预加载器").className = '测试';

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

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

因此，当我单击徽标或菜单项时，我会在容器中加载名为“博客”的类别。我的侧边栏如下所示：

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

当我通过徽标或菜单返回主页时，我有相同的地址！因为内容加载无需重新加载整个页面，并且地址不会改变。我该如何修复它？请帮帮我！我只想显示我的预加载器一次：当我通过域名或按 F5 刷新主页时。我已经感到头晕了，因为我只会HTML和CSS，但今天开始学习AJAX和jQuery。在这件事上帮助我。

所以，我自己解决了问题。但是，无论如何，感谢@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 辅助函数（来自怪异模式 http://www.quirksmode.org/js/cookies.html):

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>

但是刷新页面后如何去除我们的预载图片和背景呢？因为我们只是根据条件禁用了 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等于null仅当用户通过域名进入网站时OR已清除他的 cookie 并刷新页面（这似乎不太可能）。如果 cookie 等于1，正如我们上面设置的，我们的预加载器将显示，但没有图片和背景，并且我们的 jQuery fadeOut 也将不会运行！ 所以，我的问题如我所愿解决了，预加载器只会出现一次。再次感谢@prabeen-giri！