Question
My HTML:
https://stackoverflow.com/questions/21572128
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<html>
<head>
<link rel="stylesheet" href="C:\Users\coeconsultant3\Desktop\Loadingexample\abccss.css">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function () {
$("#loader").fadeOut("slow");
})
</script>
</head>
<body>
<div id="loader"></div>
<div id="page1">
<p>
<h1>Hello World !!!
</h1>
</p>
</div>
</body>
</html>
CSS for loader :
#loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('C:/Users/coeconsultant3/Desktop/Loadingexample/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
}
I have used script which does different behaviour:
When I use div id = loader, it shows directly the hello world.
When I use div class = loader, it just shows loading gif image and does not go through the page.
I want to know the error for this program
Solution
Your code works perfectly fine. And for information $(document).ready() is better to use.
The way you've linked your CSS, I assume you're directly opening the HTML file, i.e. by double clicking on the file (correct me if I'm wrong). If this is the case then you've to correct your jQuery linking to:
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
OTHER TIPS
Two problems with your both scenarios :
Problem 1 : When you apply class="loader" :
Here the problem is that when you use class="loader" your css applies to the div. and in javascript you are using $("#loader") instead of $(".loader")
Problem 2 : When you apply id="loader" :
Here the problem is that you remove the class="loader" and add id="loader" so your css will not be applied to the div.
Solution : Update your div with class as mentioned below :
<div id="divloader" class="loader"></div>
Update your javascript as mentioned below :
<script type="text/javascript">
$(window).load(function () {
$("#divloader").fadeOut("slow");
})
</script>
problem: you are missing a semicolon ; at the end of the function
change to
$(window).load(function () {
$("#loader").fadeOut("slow");
});
and add this too
$(document).ready(function(){
$("#page1").fadeIn(3000)
});
don't forget to give style="display:none;" for div page1
Hope it helps..!!
Instead of
$(window).load(function () {
//your code
});
use
$(document).ready(function(){
//your code
});
This gives the fadeIn effect you wish to have:
$(document).ready(function(){
$('body').css('display', 'none');
$("body").fadeIn("slow");
});
And here's a Fiddle.
Hope this helps!
Try this:
HTML:
<div id="dvLoading"></div>
CSS:
#dvLoading
{
background:#000 url(images/loader.gif) no-repeat center center;
height: 100px;
width: 100px;
position: fixed;
z-index: 1000;
left: 50%;
top: 50%;
margin: -25px 0 0 -25px;
}
SCRIPT:
<script>
$(window).load(function(){
$('#dvLoading').fadeOut(2000);
});
</script>
Here is a reference and demo.
