小编Nic*_*eat的帖子

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

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

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

<div id="preloader" class="preloader"></div>
Run Code Online (Sandbox Code Playgroud)

这显示了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>
Run Code Online (Sandbox Code Playgroud)

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

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

当我通过徽标或菜单回到主页时,我有同样的地址!因为内容加载而不重新加载整个页面和地址不会改变.我怎么解决它?请帮帮我!我只想展示我的预加载器一次:当我通过域名或通过F5刷新主页时.我已经感到头晕,因为我只知道HTML和CSS,但今天开始学习AJAX和jQuery.在这件事上帮助我.

javascript ajax jquery preloader

6
推荐指数
1
解决办法
6334
查看次数

标签 统计

ajax ×1

javascript ×1

jquery ×1

preloader ×1