javascript - how to show a 'working' indicator while inserting a big numbers of dom elements -

While creating and inserting the DOM element, it seems that the functions used for the job are from the elements shown in the page First coming back.

Before starting to insert the elements, I set the property property of 'a block' for 'block' and after setting the elements, I set the property for 'none', the problem is That indicator is not pointing to the page. Is it possible to complete? Where is the nickname for $ document. GetElementById.

  $ ('Loading') ClassName = "visible"; Var container = document.getElementById ('container'); {Var para = document.createElement ('p') for (Var i = 0; i & lt; 50000; i ++); Paragraph Episode (document.createTextNode ('paragraph no.' + I)); Container.appendChild (para); } $ ('Load'). ClassName = "hidden";  

It seems that the Element and / or Append Child run with Asynchronous, then I am hiding the pointer almost immediately?

I believe that the DOM will not refresh until the script is running.

To run it asynchronous, you can call it settimeout , with the expiration of zero milliseconds. In pseudocode:

  scrolling indicator (); SetTimeout (Elements, 0); Function addElements () {// Hide your loop here Loading indicator (); }