预载器不会在线淡出

本文介绍了预载器不会在线淡出的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我尝试创建一个预加载器，该预加载器在本地计算机上运行良好.但是，在在线托管内容时，预加载器永远不会消失.请帮忙.这是必需品:CSS，JS，Body

I've tried creating a preloader which worked perfectly in local machine. But, on hosting the content online, the preloader never fades out. Please help. Here are the essentials : CSS, JS, Body

#loader  {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: #0f2338;
 z-index: 99;
height: 100%;
}
#status  {
 width: 200px;
 height: 200px;
 position: absolute;
 left: 50%;
 top: 50%;
 background-image: url("../png/Ball.gif");
 background-repeat: no-repeat;
 background-position: center;
 margin: -100px 0 0 -100px;
}

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
script type="text/javascript">
  <script type="text/javascript">
$(window).load(function() {
$("#status").fadeOut("slow");
$("#loader").delay(500).fadeOut();
});

</script>
<body>
<div id="loader">
<div id="status"></div>
</div>

推荐答案

以下是可正常工作的代码段.如果您的网站是安全的，请确保通过https请求jquery，使用HTTPS引用jquery而不是HTTP，在这种情况下

Here is code snippet with your code working. Make sure you are requesting the jquery over https if your site is secured, use HTTPS to reference jquery instead of HTTP, in this case

$(window).load(function() {
$("#status").fadeOut("slow");
$("#loader").delay(500).fadeOut();
});

#loader  {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: #0f2338;
 z-index: 99;
height: 100%;
}
#status  {
 width: 200px;
 height: 200px;
 position: absolute;
 left: 50%;
 top: 50%;
 background-image: url("https://www.google.ca/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
 background-repeat: no-repeat;
 background-position: center;
 margin: -100px 0 0 -100px;
}

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

<body>
<div id="loader">
<div id="status"></div>
</div>

这篇关于预载器不会在线淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..

Preloader