Preloader does not fade out online

问题

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>

回答1:

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

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>

来源：https://stackoverflow.com/questions/45442664/preloader-does-not-fade-out-online

标签

javascript

jquery

html

css

preloader