如何在通过域名输入时只显示一次页面预加载器？
所以，我在主页面上有jQuery页面预加载器，如下所示：
$(window).load(function() { $("#preloader").delay(700).fadeOut("slow"); })
这显示了4次：
- 当我通过域名进入网站时;
- 当我用F5刷新主页面时;
- 当我点击徽标时（我点击它时必须转到主页面）;
- 当我点击«Home»菜单项。 但我想只在前两次展示它。 因此，我想到的第一个想法是删除
div类，当我点击JS的徽标或菜单项时，不会在整个页面上显示预加载器图像。 并使用了这个：
document.getElementById（“preloader”）。className =’test’;
但是……我意识到通过点击菜单项再次加载主页面，我创建了新的文档副本，所以我的预加载器再次出现了他的类并出现了。 因此，我决定使用AJAX并且不通过单击菜单项或徽标来重新加载整个页面。 现在我用这个：
$(document).ready(function(){ $("#blog, #logo").click(function(){ $("#container").load("/blog"); document.getElementById("preloader").className = 'test'; }); });
因此，当我点击徽标或菜单项时，我在容器中加载了名为“blog”的类别。 我的侧栏看起来像这样：
... ... Blog ...
所以，它的工作原理！ 只有通过域名打开网站时才会显示预加载器。 但是出现了一个问题。 当我打开类别«video»我有这样的地址：mysite.com/video/
当我通过徽标或菜单回到主页时，我有同样的地址！ 因为内容加载而不重新加载整个页面和地址不会改变。 我怎么解决它？ 请帮帮我！ 我只想展示我的预加载器一次：当我通过域名或通过F5刷新主页时。 我已经感到头晕，因为我只知道HTML和CSS，但今天开始学习AJAX和jQuery。 在这件事上帮助我。
所以，我自己解决了问题。 但是，无论如何，感谢@ 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）。
这是剧本：
要解决我的问题并在通过域名输入网站时只显示一次预加载器，我们需要使用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。 这是代码：
但是如何在刷新页面后删除我们的预加载器图片和背景？ 因为我们只是根据条件禁用jQuery fadeOut proccess。 图片和黑色背景一直遮住我们的窗户而不会消失......
让我们创造新的条件并将其置于其中
通过这个我们将图像，z-index和背景设置为预加载器类。 只有当用户通过域名进入网站或清除了他的cookie并刷新页面时，我们的cookie才等于null （这似乎不太可能）。 如果cookie等于1 ，正如我们上面所设置的那样，我们的预加载器将显示但没有图片和背景，我们的jQuery fadeOut也不会运行！ 所以，我的问题解决了我想要的，预加载器只会出现一次。 再次感谢@ prabeen-giri！
编辑： 对不起，我必须编辑整个事情
这就是你在每个条件下向你的服务器发送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
每当您单击主页/徽标呼叫时
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); });
我觉得应该有用。