Refresh DIV before heavy computation

Vote count:

0

This keeps bugging me and although there's a lot of "Refresh DIV with jQuery" questions out there, none addresses (haven't found it, that is) this simple matter : how do I refresh (visual aspect) a DIV before doing some heavy lifting calculations? The idea is simple, I'm creating a big chart with D3 that takes a couple of seconds to generate and I want to be able to put an animated gif in overlay before computation and remove it after. Something like :

$("#test").empty();
$("#test").text("Should be seen while waiting");
for (var i=1;i<2000000000;i++) {
    //Draw heavy SVG in #test that takes time
}
$("#test").empty();
$("#test").text("Ready");
$("#test").css("color", "red");

Simple, but I haven't been able to do it thus far : the "Should be seen while waiting" never appears :(

A simple Fiddle here demonstrates the behaviour : http://ift.tt/1jkjxCE

I tried using setTimeout and jQuery's .delay() in 3 different browsers, but to no avail.

Thanx for any input.

asked 28 secs ago

Steph

8