在功能完成之前，屏幕不会重新粉刷

Question

Please look at the following code:

...
$(document.documentElement).append("<div id='suggestContainer'>Loading...</div>");
$("#suggestContainer").css({
    border: "1px solid black",
    position: "absolute",
    display: "block",
    left: 100,
    top: 100,
    height:100
});
//alert("test");
TimeConsumingFunction();
...

The problem: suggestContainer element won't display in the document until TimeConsumingFunction call is completed. If I uncomment alert(test) before TimeConsumingFunction call, alert dialog shows up and I can see suggestionContainer element displayed.

Why is this happening? I tried IE and Chrome and it works the same. Is there way to flush HTML and force changes to be displayed?

Thanks

Answer 1

I think it is happening because you are appending the div and just after that adding the css so may be it is not loaded to DOM properly.After css added use setTimeout for a sec then call TimeConsumingFunction(); or use the css in the div itself ie inline.

setTimeout(function(){ TimeConsumingFunction() },100);