jQuery: Increase Perceived Responsiveness During the Ready Event

Question

• Launching code on document ready is a pillar of jQuery.
• But sometimes, lengthy operations will be executed inside the ready event.
  • For example, attaching multiple carousel instances to lengthy unordered lists will take some time.

Question:

How can I increase perceived responsiveness during the ready event?

For example:

• Can I pop a thickbox instance with a 'Did You Know?' section that obscures the underlying DOM manipulations?
  • ...And then automatically close that thickbox instance when the ready event is complete?

Answer 1

Every feedback that you give to the user will result in better perceived responsiveness. A loading image is classic - and well known (i.e. consistent with the user mind model). The thickbox may be rather annoying by itself - but if you combine it with a loading message, as most people in the game industry have already discovered, it will yield much better results by simultaneously educating the user and providing feedback.

[edit]

Something like this:

$(function() {
    tb_show(caption, url, imageGroup); // show thickbox

    /* lengthy operation here */

    tb_remove(); // remove thickbox
});

[/edit]