Improving jQuery UI ajax loading dialog for all page loads

My web development project loads a lot of content via JSON and AJAX (aren't these basically the same thing).

I have implemented a loading gif pop up in a jquery UI dialog. This is hooked up to the .ajaxStart and .ajaxStop events.

$(document).ready(
        function () {
            $(window).load(function () { Load(); });
....

 function Load() {
.ajaxStart(function () {
//Show popup
}
.ajaxStop(function () {
//Hide popup

}

So this is pretty good, and whenever i'm loading content via ajax the loading pop up appears. Great. My next question is - the feedback im gett开发者_如何学Going - they think its weird that there is loading for this content, but then when you request an entire new page in the web app, the 'load' takes a while, and there is no loading dialog like the other ajax loading examples. Personally to me - this makes perfect sense, but the user doesn't like it.

Is there any easy way I can hook up my same dialog to page loads? I'm thinking if there is a way to know/jquery event for when they request a new page, I can just pop the loading dialog up and leave it there till the new page has loaded.

Grateful any advice?

Thanks.

---

Sure, check out the unload event. http://api.jquery.com/unload/

So literally just chuck

$(window).unload(function () { Load(); });

In your document ready and it'll show the popup when the user navigates to a new page (might need to customise it because you don't need any ajax request considering you're not loading any data dynamically).

---

You can't leave the loading dialog until the next page loads because there's often a pretty large gap between the unload of the current document and the loading of the next.

If your site was completely ajax then you could do it, but making a site completely ajax driven takes keen attention to detail (back button support, bookmarking, events, etc), so I'd think twice about going down that path.