CODEWITHSUNDEEP
javascriptcssgraphicsrepaint
Nathan
Nathan

Reputation: 7032

Repaint CSS before JavaScript runs (to show progress indicator)

I have a JS routine (triggered by the user) that can take some time to complete. While the routine is running, I want to show a progress overlay on screen. Here's the code that calls the routine (this is called in response to a click event):

function handleClick() {
    $('div#progressOverlay').removeClass('hidden');
    myBigRoutine();
    ...
    $('div#progressOverlay').addClass('hidden');
}

The class toggle triggers a change in opacity and visibility (animated with a transition).

The class changes themselves are working fine; the first is executed before the slow routine and the second is executed after everything else.

The issue is that the visual appearance of #progressOverlay doesn't change until after myBigRoutine() finishes.
The result is that the progress overlay flashes on screen for a split second and then is immediately hidden again (all with no animation)

Is there a way to force the visual update/repaint to occur before (or, even better, in parallel with) the big JavaScript routine?

Upvotes: 1

Views: 253

Answers (2)

Jashwant
Jashwant

Reputation: 29015

You can bind an event to animation finish. So, when animation finishes, only then your code will execute,

function handleClick() {
    $('div#progressOverlay').removeClass('hidden');

}

$("div#progressOverlay").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
    myBigRoutine();
    ...
    $('div#progressOverlay').addClass('hidden');
});

I hope, this is what you need :)

Upvotes: 1

Pavel Strakhov
Pavel Strakhov

Reputation: 40502

Your myBigRoutine() function should be called asynchronously. 

function handleClick() {
  $('div#progressOverlay').removeClass('hidden');
  setTimeout(function() {
    myBigRoutine();
    ...
    $('div#progressOverlay').addClass('hidden');
  }, 150);
}

150 is a magic number that means timeout delay in milliseconds. It can be any small number.

Also, consider using .hide() and .show() jQuery methods instead of hidden class.

Upvotes: 1

Related Questions