Question

I want to click a button, show a loader image, execute a time-consuming function, hide the loader image. When I attempt this, the page freezes until the entire event runs, so the loader image is never seen.

Here is a sample:

$('#btn').click(function() {
    $('#LoadingImage').show();
    <time consuming function>
    $('#LoadingImage').hide();
});

How can I distinctly show the loader image, update the screen, run the function, hide the loader image?

Answer 1

Although what you have should work, try doing this:

$('#btn').click(function() {
    $('#LoadingImage').show();
    setTimeout(function() {
        <time consuming function>
        $('#LoadingImage').hide();
    }, 0);
});

This will escape the call stack of the event.

If THAT doesn’t work, then post more details as to what this mystery time consuming function is.