How to show a loading message while jQuery code is running?

Question

I am new to jQuery and I have a piece of code inside the ready function that takes about 4-5 seconds to finish. What I'd like to do is to probably use blockUI to show a "Please wait" message or something while the page is loading. However, if I insert the $.blockUI and $.unblockUI inside the ready function it just runs and disappears right away. If I put it outside, it trashes IE6. Any ideas? I don't necessarily need to use the BlockUI plugin, anything else would do.

Thanks!

EDIT: Thanks everyone for the feed back. My code is pretty long so I did not want to post it here, but it basically builds a tree of checkboxes and the tree is pretty long about 1000 leaves. So it goes about picking the checked ones and expand them, hide the unchecked ones, and so on and so forth. I know I can try to optimize it a little more, but I guess I am also curious about how to do this. So basically I am not doing any post, get, or ajax calls that I can attach the unblock code to it. Most of the statements are selecting some nodes and adding/removing some attributes, like hide, show, etc.

I did some profiling with yslow and it seems that the load time is divided between the html being parsed (~2.5 sec) and the javascript code (~2.5). Which got me thinking if there is a way to have the blockUI fire as soon as the page load, before the jquery ready function returns true.

Thanks all!

Thanks again everyone!

Answer 1

You can also show modal jQuery dialog with a message

Answer 2

You'll want to show your element immediately upon starting the long process, and hide it from within a callback. So, for instance, if you're doing a post:

showloading();
$.post("/foo", { id:'bar' }, function(){
  hideloading();
});

In this example, hideloading() won't be called until the longer process of posting to the server completes.

Answer 3

You need to run the thing that displays you loader before you call you function that is doing the action and then once this action is finished stop the loader. e.g.

function startloader(){
//do  loading stuff
}
function stoploader(){
//stop loader stuff
}

function doingstuff(){
 startloader()
//doing stuff
stoploader()

}

You could set a flag to say when action is finished and poll for this if you want using a timeout.

Answer 4

As Nick mentions, having client-side code chew up several seconds of your user's CPU time seems pretty scary. That aside, you might want to do something like this:

1. show the "please wait" message
2. set up a timeout routine to start 5 milliseconds in the future to do the big computation
3. at the end of that timeout routine, get rid of the "please wait" message

That way, you give the browser a chance to show your message before the work starts.

Answer 5

When you start your cruching append a div to body

css:

#overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: /* some transparent image or rgba */
}

After you finish your script, just remove or hide this element

Answer 6

What are you doing that's taking the time? If it's an Ajax call, the documentation can help: you just need a callback function (ref. the "complete" function mentioned in the example call below) to hide your loading message:

.load(url, [data], [complete(responseText, textStatus, XMLHttpRequest)])

Answer 7

Your problem is that the lockup is preventing the animation intervals from running, so what you see is a queued animation finish up very quickly once some processor is available. $.blockUI has a onBlock callback you can use for this, example:

$.blockUI({ message: $("#myBlocker"), onBlock: doWork });

function doWork() {
  //long running operation
  $.unblockUI();
}

This lets the initial fadeIn() (used internally in blockUI) animation complete before starting work. alternatively, set the fadeIn: 0 in tne $.blockUI() properties to disable the fadeIn completely.