CODEWITHSUNDEEP
jqueryjquery-uijquery-pluginsuser-interfaceperception
Jim G.
Jim G.

Reputation: 15373

jQuery: Increase Perceived Responsiveness During the Ready Event

Question:

How can I increase perceived responsiveness during the ready event?

For example:

Upvotes: 1

Views: 276

Answers (2)

James Wheare
James Wheare

Reputation: 4800

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);

Upvotes: 0

Alex Gyoshev
Alex Gyoshev

Reputation: 11977

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]

Upvotes: 1

Related Questions