Page loading animation

Question

I want to display loading animations while my page is loading, and when the download is complete, and then explicitly hide it.

I work in ASP.NET using MasterPages, just wondering if there is an easy way to do this using jQuery?

Any pointers would be appreciated.

thanks

Answer 1

Just put the animated gif image on the page. Give it the id loadImage and add the following script:

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

By the way, how long does your page load? Does AJAX use calls to load data? Perhaps you should study this in the callback handler too, call the hide () function on your image.

Answer 2

Consider using UpdateProgress control

Answer 3

If both answers above were on the right line, I could either do what I needed in my script.

However, I found the following message that on SO, which provided me with the solution I received after.

Colorbox: Show / simulate 'loading' animations for Iframe content

Thank you all for your input.

Answer 4

I did the animation this way on my main 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 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> 

Hope this helps.