How to show loading message when running jQuery code?

Question

I am new to jQuery and I have a piece of code inside a finished function that takes about 4-5 seconds. What I would like to do is use blockUI to show a “Wait” message or something else while the page is loading. However, if I insert $ .blockUI and $ .unblockUI inside the finished function, it just starts and disappears right away. If I pulled it out, it will mix IE6. Any ideas? I don't have to use the BlockUI plugin, anything else.

Thanks!

EDIT: Thanks to everyone for the feedback. My code is quite long, so I did not want to publish it here, but it basically creates a flag tree, and the tree is quite long with about 1000 leaves. Thus, he is going to select proven ones and expand them, hide unverified ones, etc. Etc. I know that I can try to optimize it a little more, but I think I'm also interested in how to do it. So basically I don’t make any messages, receive or ajax, which I can attach an unlock code to it. Most statements select some nodes and add / remove some attributes, such as hide, show, etc.

I did some profiling with yslow and it seems that the load time is divided between the parsed html (~ 2.5 sec) and the javascript code (~ 2.5). Which made me wonder if there is a way to block fireUI immediately after the page loads, until the jquery ready function returns.

Thanks everyone!

Thanks again everyone!

Answer 1

You will want to show your element immediately after the start of a long process and hide it from the callback. So, for example, if you make a message:

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

In this example, hideloading() will not be called until the longer publishing process on the server is complete.

Answer 2

You can also show jQuery modal dialog with message

Answer 3

You need to run the thing that your loader displays before you call the function that performs the action, and then once the action is finished, stop the loader. eg.

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

You can set a flag to indicate when the action is completed, and poll for this if you want to use a timeout.

Answer 4

As Nick mentions that client code is chewing on a few seconds of your processor time, it seems pretty scary. As an aside, you can do something like this:

• show the message "please wait"
• set a timeout to run 5 milliseconds in the future to do big calculations
• at the end of this timeout, get rid of the message "please wait"

Thus, you give the browser the opportunity to show your message before you start.

Answer 5

When you start your cracking, add a div to the 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 delete or hide this element

Answer 6

What do you do, does it take time? If this is an Ajax call, the documentation may help : you just need a callback function (the link is the “full” function mentioned in the call example below) to hide your boot message:

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

Answer 7

Your problem is that blocking prevents the start of animation intervals, so what you see is an animation queue ending very quickly as soon as any processor is available. $.blockUI has an $.blockUI callback that you can use to do this, for example:

 $.blockUI({ message: $("#myBlocker"), onBlock: doWork }); function doWork() { //long running operation $.unblockUI(); } 

This allows you to complete the initial fadeIn() animation (used inside the block) before starting work. alternatively, set fadeIn: 0 in the $.blockUI() properties to completely disable fadeIn.