Page loading animation

I want to display a loading animation while my page is loading, and when loading is complete then obviously hide it.

I am working in ASP.NET us开发者_C百科ing Masterpages, just wondering there is a a simple way of doing this using JQuery?

Any pointers would be appreciated.

Thanks

Just place an image with the animated gif on the page. Give it an id of loadingImage and add the following script:

$(document).ready(function(){
    $('#loadingImage').hide();
});

Incidentally, how long is your page taking to load? Is it using AJAX calls to load data? Maybe you should look into this and in the callback handler, call the hide() function on your image.

Consider using UpdateProgress control

When both answers above were along the right lines, I could get either do exactly what I needed in my scenario.

However I found the following post that on SO that has provided me the solution I was after.

Colorbox: Show/simulate 'loading' animation for iframe content?

Thanks all for your input.

I made an animation in this way on my master page:

<div id="loading" style="text-align: center" hidden><asp:Image ID="loadingImage" runat="server"  ImageUrl="~/Images/loading.gif" /></div>

and then I used jQuery in this way

<script>
function showLoading() {
    $("#loading").show();
  }

  var loadingTimeout = setTimeout(showLoading, 3000);

  $(document).ready(function() {
    clearTimeout(loadingTimeout); //make sure loader doesn't appear if page loads in less than 3 seconds
    $("#loading").hide();
  });
</script>

I hope this will help.