【问题标题】:Preloader does not fade out online预加载器不会在线淡出
【发布时间】:2017-08-01 16:05:15
【问题描述】:

我尝试过创建一个可以在本地机器上完美运行的预加载器。但是,在在线托管内容时,预加载器永远不会消失。请帮忙。这里是要点: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 吗?
  • 是的,我使用的是 HTTPS

标签: javascript jquery html css preloader


【解决方案1】:

这是代码 sn-p 与您的代码工作。如果您的网站是安全的,请确保您通过 https 请求 jquery,在这种情况下使用 HTTPS 而不是 HTTP 来引用 jquery

https://code.jquery.com/jquery-1.9.1.min.js

$(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>

【讨论】:

  • 脚本(用于 jquery)不会在 head 里面?
  • 最好放在中当然,SO代码sn-p只是一个例子。根本原因在于用于引用 jquery 的协议。
  • 这就是我的代码,它不能在线工作!
  • 你的代码是这样的http://code.jquery.com/jquery-1.9.1.min.js,需要改成这样https://code.jquery.com/jquery-1.9.1.min.js。使用 HTTPS 而不是 HTTP。
  • 值得称赞的观察!这个东西肯定会在加载器之后加载我的页面。但是 gif 需要一些时间才能与预加载器屏幕的背景一起出现。你有什么建议?
猜你喜欢
  • 2014-06-13
  • 2021-04-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多