Question

I have the following script which works fairly nicely to show when ajax stuff is loading:

$("#divLoading").ajaxStart(function () {
    $('#divLoading').show();
});

$("#divLoading").ajaxComplete(function () {
    $('#divLoading').hide();
});

However, this seems to start with a delay after a click event and ends before the content is displayed on the screen, i.e. the following is exagerated, just to explain the issue:

If I click on a button which executes something ajaxy, the loading div appears 5 seconds after clicking the button. The div stays on the screen for 10 seconds, the div disappears and the content change happens 5 seconds after the div has disappeared.

Any idea why this is happening and how I can get the message to display itself as soon as any click event happens, and only disappear when the html has finished loading on the screen?

Answer 1

This happens because this function executes during the actual ajax call not before and after your click handler and callback which hapen at either end of the ajax call.

If you look at your code, you’re probably doing something to prep for the ajax call in the click event of the button BEFORE the ajax call, then in the callback the ajax call is complete, so the message is hidden, but you still have code to complete.