Question

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

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

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

这显示了4次：

当我通过域名进入网站时;
当我用F5刷新主页时;
当我点击徽标时（我点击它时必须转到主页）;
点击«主页»菜单项。但我想只在前两次展示它。因此，我想到的第一个想法是删除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 proccess。图片和黑色背景一直遮住我们的窗户，不会消失......

让我们创造新的条件并将其置于

<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 已清除其Cookie并刷新页面（这似乎不太可能）。如果cookie等于 1 ，如上所述，我们的预加载器将显示但没有图片和背景，我们的jQuery fadeOut也不会运行！所以，我的问题解决了我想要的，预加载器只会出现一次。再次感谢@ prabeen-giri！

Answer 2

编辑：抱歉我必须编辑整件事

这就是你要向服务器发送http请求的每一个条件，这实际上意味着你在初始状态下重新加载你的DOM，之后你使用Javascript工作。

使用GET方法会更容易，但正如你所说，你只是在学习。你可以改用cookies，

这是cookie帮助函数

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
} 

function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\s+|\s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}

每当您点击主页/徽标通话

时

setCookie('referer','home',7), setCookie('referer','logo',7);

现在，

 $(window).load(function() {
    if (getCookie('referer') != 'home' || getCookie('referer') != 'logo'){ 
     $("#preloader").delay(700).fadeOut("slow");
    } 

    setCookie('referer',null,7); 
 });

我觉得应该有用。

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

2 个答案: