Home/ Questions/Q 6624063
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T21:36:27+00:00

Possible Duplicate: Hiding page loading I’m using loading animation for hiding whole page load

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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);
    });
});
    • 0