Best way to display a loading gif while a database call process on the first page load
So I'm new to Ajax. I have an ASP.NET wizard panel wrapped in an ASP Ajax UpdatePanel. The Ajax is working well, with the page doing partial updates as you step through the wizard. I'm even firing an animated gif images using the unblockUI.js jQuery library to prevent multiple page submits. What I can't figure out is when the page first loads, the wizard panel takes nearly a minute to load initially because of a longish database call. This isn't an async postback, so my animated gif doesn't fire. In fact, I just get an hour glass while the page loads. Is there a way to go ahead and load the rest of the page content and display that gif while the minute long database call is in effect? I've tried moving the DB call to after the page load, but it's still doing it on the initial page load and I don't get to do it asynchronously.
Again, I'm new to the asynchronous stuff. This seems like it s开发者_如何学编程hould be simple, but I'm stuck.Update: Ok, the tricky part for me was figuring out how to do the data load with the Ajax call. I have virtually no experience with that. This may be a kludge, but it's actually working pretty well without too much new code: I moved the data load from the Page Load to the Load event of my UpdatePanel, but put it in an If IsPostBack. It's the same code behind that was running before, but now only runs on a postback. Then in my markup, I put this (thanks to the answer below):
$(document).ready(function()
{
__doPostBack('<%= Me.UpdatePanel1.ClientID %>', '');
});
I just unhide the waiting div by default and hide it in the If IsPostback piece after the data loads. I had to mess with some control hiding logic (back and proceed buttons for the wizard, the loading.gif div, etc.), but the only new code was above.
Generally, I would present a spinner or reasonably indicative loading animation before the ajax call commences. If the initial page load takes forever, you could instead kick-off the long running process with an ajax call in your $(document).ready(... function:
$(document).ready(function() {
$('#someId').html('<img src="loading.gif"/>').load('complex.aspx');
});
精彩评论