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]

Answer 2

In addition to progress indicators, you can parallelise multiple operations using the Javascript setTimeout function with a very short timeout. This effectively allows you to make use of multiple threads in the browser, running each operation asynchronously.

Only use this technique if your operations don't depend on each other for ordering or timing, and don't create too many timeouts at once or you might cause browser hangs due to increased memory usage.

Note also that browsers have a minimum timeout, usually around 10-20ms, but it varies between browsers; it should be short enough to be unnoticeable. If you set a timeout of 0, it will default to the browser minimum.

Here's a simple example for your carousel setup, splitting the lists into two groups:

setTimeout(function () {
    // code for attaching first carousel group
    // ...
}, 0);
setTimeout(function () {
    // code for attaching second carousel group
    // ...
}, 0);