Home/ Questions/Q 8934069
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T09:41:56+00:00

I am trying to fade in the whole page after its loaded, my code:

  • 0

I am trying to fade in the whole page after its loaded,

my code:

<script type="text/javascript">
    $(window).bind("load", function() {
        $('#overlay').fadeOut(function() {
            $('html').fadeIn();
        });
    });
</script>


<html style="display:none">
....
<body>
.....
</body>
</html>
<div id="overlay">
     <img src="ajax-loader.gif" alt="Loading" />
     Loading...
</div>

The problem is the loading image doesn’t show

what should I do?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The loader is in the HTML block, which has display:none. So it won’t display. (even though you put it outside of it)

    Instead, create a container DIV with display:none, hide that & fade it in, instead of the HTML.

    <html>
<head>

<script type="text/javascript">
    $(window).bind("load", function() {
        $('#overlay').fadeOut(function() {
            $('#container').fadeIn();
        });
    });
</script>
</head>
<body>

    <div id="overlay">
         <img src="ajax-loader.gif" alt="Loading" />
         Loading...
    </div>
    <div id="container" style="display:none">

    </div>

</body>
</html>
    • 0