Preloader

Preloader

关注
发信
关注(28)粉丝(399)

如何显示网页preloader只有一次，而通过域名进入？

本文介绍了如何显示网页preloader只有一次，而通过域名进入？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

所以，我主页上的jQuery页preloader是这样的：

 ＆LT;脚本类型=文/ JavaScript的＆GT;
    $（窗口）.load（函数（）{
        $（＃preloader）延迟（700）.fadeOut（慢）;
    }）
 

 ＆LT; D​​IV ID =preloader级=preloader＆GT;＆LT; / DIV＆GT;

这显示了4次：

  1. 当我通过域名进入网站;
  2. 当我刷新页面主要由F5;
  3. 当我点击标识（我必须去主页时，我点击了）;
  4. 当我点击«主页»菜单项。但我想只显示其对前两次。因此，它排在我的脑海里的第一个想法是删除 DIV 类不显示在整个页面preloader形象，当我点击图标或菜单项被JS。而使用了这一点：

但后来......我意识到，通过点击菜单项来重新装入主网页，我创建的文件新副本，所以我的preloader再有他的课，并出现了。所以，我决定使用AJAX和通过点击菜单项或标识不重新加载整个页面。现在我用这样的：

 ＆LT;脚本类型=文/ JavaScript的＆GT;
        $（文件）。就绪（函数（）{
             $（＃博客，#logo）。点击（函数（）{
                 $（＃集装箱）的负载（/博客）。
                 。的document.getElementById（preloader）的className =测试;
             }）;
        }）;
    ＆LT; / SCRIPT＆GT;

所以，当我点击图标或菜单项我加载我的类叫«博客»集装箱。而我的边栏看起来是这样的：

  ...
＆LT; A HREF =JavaScript的:; ID =标志＆GT;＆LT;我类=标志＆GT;＆LT; / I＆GT;＆LT; / A＆GT;
...
＆LT;李类=m_blog＆GT;＆LT;一个ID =博客HREF =JavaScript的：;＆GT;＆LT;我类=图标＆GT;＆LT; / I＆GT;博客＆LT; / A＆GT;＆LT; /李＆GT;
...

所以，它的工作原理！ preloader出现只有当您通过域名打开网站。但是1的问题出现。当我打开类«视频»我有联系地址如下：mysite.com/video /

当我回到主界面，通过图标或菜单我有同一个地址！因为没有重新加载整个页面和地址，内容加载不会改变。我怎样才能解决这个问题？请帮帮我！我只是想表明我的preloader只有一次：我来的时候，通过域名或F5刷新主页。我已经感到头晕，因为我只知道HTML和CSS，但今天开始学习AJAX和jQuery。帮我在这件事情。

解决方案

所以，我已经解决我自己的问题。但是，不管怎样，感谢@ prabeen - 吉里谁帮我​​想在正确的道路。首先，我要解释一下preloaders机制。只要看看CSS：

 的位置是：固定;
显示：块;
顶部：0; / *制作preloader覆盖所有屏幕* /
右：0;
左：0;
底部：0;
背景重复：不重复;
背景位置：中心;中央;
背景尺寸：自动汽车;
背景图像：网址（../图像/ preload.png）; / *你的照片应该在这里* /
背景颜色：＃000;
的z-index：99; / *必须是最高号码的所有其他人，以支付他们所有的* /

那么，你的preloader只是一个图片或涵盖所有窗口，并顺利地消失（由jQuery的），当全部内容加载别的东西。 

 ＆LT; D​​IV ID =preloader级=preloader＆GT;＆LT; / DIV＆GT;

这里是脚本：

 ＆LT;脚本类型=文/ JavaScript的＆GT;
     $（窗口）.load（函数（）{
          $（＃preloader）延迟（700）.fadeOut（慢）;}）;
＆LT; / SCRIPT＆GT;

要通过我们需要使用Cookie的域名进入网站的时候解决了我的问题，并显示preloader只有一次。有2个cookie的辅助功能（从 Quirksmode ）：

 函数的createCookie（名称，值天）{
如果（天）{
    VAR日期=新的日期（）;
    date.setTime（date.getTime（）+（天* 24 * 60 * 60 * 1000））;
    变种期满=;期满=+ date.toGMTString（）;
}
其他VAR到期=;
的document.cookie =名称+=+值+到期+;路径= /;
}

功能readCookie（名字）{
VAR nameEQ =名称+=;
变种CA = document.cookie.split（';'）;
对于（VAR I = 0; I＆LT; ca.length;我++）{
    变种C = CA [I]
    而（c.charAt（0）==''），C = c.substring（1，c.length）;
    如果（c.indexOf（nameEQ）== 0）返回c.substring（nameEQ.length，c.length）;
}
返回null;
}

所以，我们需要进入自己的cookie来创建运行脚本的条件。最初，我们创建的cookie等于空，这平等是条件运行脚本。之后，我们设置cookie的一些价值不重新开始jQuery的。下面是code：

 ＆LT;脚本类型=文/ JavaScript的＆GT;
    $（窗口）.load（函数（）{
        如果（readCookie（'引荐'）== NULL）{
            $（＃preloader）延迟（700）.fadeOut（慢）;}
        createCookie的（引用者，1,0）;
     }）;
＆LT; / SCRIPT＆GT;

但如何刷新页面后，除去我们的preloader画面和背景是什么？因为我们刚刚关闭的jQuery淡出proccess我们的条件。图片和黑色的背景不断覆盖我们的窗口，并不会消失......

让我们创造新的条件，并将其放置在

 ＆LT;脚本＆GT;
    如果（readCookie（'引荐'）== NULL）{
        。的document.write（＆LT;风格＆GT; preloader {背景图像：网址（../图像/ preload.png）;背景颜色：＃000;的z-index：99;}＆LT; /样式＆GT;）;
    }
＆LT; / SCRIPT＆GT;

通过这一点，我们建立我们的形象，Z指数和背景，以preloader类。我们的Cookie等于空，只有当用户通过域名进入网站或已经清除了cookie，并刷新页面（这似乎不太可能）。如果饼干等于 1 ，因为我们设置上面，我们的preloader会出现，但没有画面和背景，以及我们的jQuery淡出不会跑呢！所以，我的问题解决了，因为我想，preloader会出现一次。再次感谢@ prabeen - 吉里！

So, I have jQuery page preloader on main page like this:

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

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

This shows 4 times:

  1. When I enter the site through domain name;
  2. When I refresh main page by F5;
  3. When I click on logo (i must go to main page when i clicked that);
  4. When I click «Home» menu item.But i want to show it only on first two times.So, the first idea which came in my mind is delete div class to not show preloader image over whole page when i clicking logo or menu item by JS. And have used this:

But then... I realized that by clicking menu item to load main page again, i create new copy of document, so my preloader has his class again and showed up. So, i decided to use AJAX and to not reload whole page by clicking menu item or logo. Now i use this:

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

So, when i click logo or menu item i load my category called «blog» in container. And my side bar looks like this:

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

So, it works! Preloader appear only when you open site through domain name. But 1 problem appear. When i open category «video» i have adress like this: mysite.com/video/

And when i came back to main page through logo or menu i have same adress! Because content loading without reload whole page and adress doesn't change. How i can fix it? Help me, please! I just want to show my preloader only once: when i came through domain name or refresh main page by F5. I already feel dizzy, because i only know HTML and CSS, but today start to learn AJAX and jQuery. Help me in this matter.

解决方案

So, i have resolved problem on my own. But, anyway, thanks to @prabeen-giri who have helped me thinking in right way.Firstly, I need to explain preloaders mechanism. Just look at 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 */

So, your preloader just a picture or something else which cover all window and smoothly disappear (by jQuery) when whole content is loaded. 

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

And here is script:

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

To resolve my problem and show preloader only once when entering site through domain name we need to use cookies. There are 2 cookie helper function (from 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;
}

So, we need to enter our own cookie to create the conditions for running the script. Initially our created cookie equals null and this equality will be condition to running the script. After that we set cookie some value to not start jQuery again. Here's code:

<script type="text/javascript">  
    $(window).load(function() {
        if (readCookie('referer') == null){
            $("#preloader").delay(700).fadeOut("slow");}
        createCookie('referer',1,0);
     }); 
</script>

But how to remove our preloader picture and background after refreshing the page? Because we just disable jQuery fadeOut proccess by our conditions. Picture and black background keep covering our window and not going to fade away...

Let's create new condition and place it in 

<script>
    if (readCookie('referer') == null) {
        document.write("<style>.preloader {background-image: url(../images/preload.png); background-color:#000; z-index:99;}</style>");
    }
</script>

By this we set our image, z-index and background to preloader class. Our cookie equals null only when user enter the site through domain name OR have cleared his cookie and refresh the page (which seems unlikely). And if cookie equals 1, as we set above, our preloader will show up but without picture and background, and our jQuery fadeOut will not run too!So, my problem resolved as I wanted, preloader will show up only once. Thanks again to @prabeen-giri!

这篇关于如何显示网页preloader只有一次，而通过域名进入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

10-28 07:03
Powered by LMLPHP ©2024 Preloader 0.001706