jQuery check to see if javascript is processing

Question

I have many jquery methods invokiing different script services and then rendering the data as html. How do I display a "processing .." indicator that deterministically says that something is happening behind the curtains?

I have thought about dislpaying and hiding an indicator during getJSOn calls, but there seems to be so many different calls. Is there an easier way or a best-practice to follow to achieve the same.

Answer 1

Show the status indicator when the method is invoked. Hide it in the callback function of getJSON.

Answer 2

I would suggest the same adamantium, but also introduce a counter that is incremented with each method invocation and decremented by the callback function. That way when you decrement it and it becomes 0 you know you can hide the processing indicator again.

This could look something like this, you'll obviously need to change function names etc.

var openCalls = 0;

function MethodInvocation() {
    $(".indicator").show();
    openCalls++;
}

function Callback() {
    openCalls--;

    if(openCalls == 0) {
        $(".indicator").hide();
    }
}

Answer 3

Here is my solution if you don't want to wait the 'loaded' state : http://yannesposito.com/Scratch/multi/blog/2009-10-How-to-preload-your-site-with-style/