CODEWITHSUNDEEP
javascriptbuttonloader
Cameron
Cameron

Reputation: 671

javascript button on click show loader

I am using javascript to complete a command which sometimes takes a long time to accomplish, but when I click the button, the button stays pushed and does not update the screen until the javascript execution is complete. I need to know how to continue updating the screen while executing the javascript, because I want to show a loader while executing the javascript.

Code: jsFiddle code

Upvotes: 1

Views: 2535

Answers (2)

Fabrício Matté
Fabrício Matté

Reputation: 70169

The image doesn't show because the browser will ensue a redraw/repaint only after the current Javascript stack ends.

What you can do is showing the loader and using a setTimeout to call your heavy-processing function after the repaint has taken place.

Note that if your function executes synchronous actions such as a for loop 100000000 times as in your fiddle, your browser will be too busy processing it to animate a loading image (you'll have a static image then).

onclick="show_loader(); setTimeout(fn, 100);"

Fiddle

Upvotes: 1

Jared Drake
Jared Drake

Reputation: 1002

use jQuery. The jQuery.click will get an on click action, then use jQuery's toggle with a div that contains a loading gif inside the click function.

Upvotes: 1

Related Questions