Preloader does not fade out online

Question

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>

Do you have any errors on the console? Are you using HTTPS? – DarthJDG Aug 01 '17 at 16:07 — DarthJDG, Aug 01 '17 at 16:07

Eugene Komisarenko · Accepted Answer · 2017-08-01T16:23:28.343

2

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>

edited Aug 01 '17 at 16:23

answered Aug 01 '17 at 16:10

Eugene Komisarenko

1,533
11
25

The script (for jquery) will not be inside head? – Hritik Gupta Aug 01 '17 at 16:15
Better put it in the of course, SO code snippet is just an example. The root cause was in the protocol being used to reference the jquery. – Eugene Komisarenko Aug 01 '17 at 16:18
Thats what my code was anyway, it doesnt work online! – Hritik Gupta Aug 01 '17 at 16:19
1

Your code was like this `http://code.jquery.com/jquery-1.9.1.min.js`, it needs to be changed to be like this `https://code.jquery.com/jquery-1.9.1.min.js`. Use HTTPS instead of HTTP. – Eugene Komisarenko Aug 01 '17 at 16:20
Commendable observation! The thing surely loads my page after the loader. But the gif takes time to appear along with the background of preloader screen. What do you suggest? – Hritik Gupta Aug 01 '17 at 17:29
Is your fading out effect working now? If so please ask a separate question for the delay. It may have something to do with the placement of the styles on the page or overall performance of the page. – Eugene Komisarenko Aug 01 '17 at 17:36
Yes, I will see to it. :) – Hritik Gupta Aug 01 '17 at 17:44

Preloader does not fade out online

1 Answers1

Linked