Question

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 getting – 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.

Answer 1

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).