6

所以，我在主页上有 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("preloader").className = 'test';

但是后来...我意识到通过单击菜单项再次加载主页，我创建了文档的新副本，因此我的预加载器再次拥有他的课程并出现了。所以，我决定使用 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。在这件事上帮助我。

4

2 回答 2

2

所以，我自己解决了问题。但是，无论如何，感谢@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！

于 2013-04-14T19:27:04.403 回答
0

编辑：对不起，我不得不编辑整个事情

事情是这样的，您在每种情况下都向服务器发送 http 请求，这实质上意味着您在初始状态下重新加载 DOM，然后您使用 Javascript 在该状态下工作。

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

这是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); 
 });

我认为应该工作。

于 2013-04-10T21:04:11.477 回答