1

Possible Duplicate:
Hiding page loading

I'm using loading animation for hiding whole page load process. but it ends long before It must fade out. it ends while loading but must fade out after full page load

Here is the js

$(document).ready(function(){

    $('#loading').fadeOut(600, function() 
    {
        $("#wrap").fadeIn(1000);
        $("#footer").fadeIn(1000);
    });
});

HTML markup

<html>
<body>
<div id="loading"><img src="core/design/img/load/load.gif" /></div>
<div id="wrap"></div>
<div id="footer"></div>
</body>
</html>

I'm trying to hide whole page loading process with following solution.

CSS Rules:

#loading {
    position:fixed; 
    left:0; 
    top:0; 
    width:100%; 
    height:100%;
    background-image:url("img/load/tr.png"); 
    z-index:100;
}
#loading img {position: absolute; margin-left:-110px; margin-top:-9px; left:50%; top:50%}

You can see it in action

Community
  • 1
  • 1
Tural Ali
  • 22,202
  • 18
  • 80
  • 129

1 Answers1

1

You need to use $(window).load(function(){ }); instead of $(document).ready(function(){ });

More info: $(document).ready vs. $(window).load

For users with javascript disabled:

$(document).ready(function(){
    $('body').append('<div id="loading"><img src="core/design/img/load/load.gif" /></div>');
});
$(window).load(function(){ 
    $('#loading').fadeOut(600, function(){
        $("#wrap").fadeIn(1000);
        $("#footer").fadeIn(1000);
    });
});
marissajmc
  • 2,583
  • 1
  • 22
  • 19