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

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. 当我点击徽标时(我点击它时必须转到主页面);
4. 当我点击«Home»菜单项.但我想只在前两次展示它.因此,我想到的第一个想法是删除div类,当我点击JS的徽标或菜单项时,不显示整个页面上的预加载器图像.并使用了这个:

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

但是......我意识到通过点击菜单项再次加载主页面,我创建了新的文档副本,所以我的预加载器再次出现了他的类并出现了.因此,我决定使用AJAX并且不通过单击菜单项或徽标来重新加载整个页面.现在我用这个:

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

因此,当我点击徽标或菜单项时,我在容器中加载了名为"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>
...

所以,它的工作原理!只有通过域名打开网站时才会显示预加载器.但是出现了一个问题.当我打开类别«视频»我有这样的地址:mysite.com/video/

当我通过徽标或菜单回到主页时,我有同样的地址!因为内容加载而不重新加载整个页面和地址不会改变.我怎么解决它？请帮帮我!我只想展示我的预加载器一次:当我通过域名或通过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>

但是刷新页面后如何去除我们的预载图片和背景呢？因为我们只是根据条件禁用了 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！