jQuery script is not executing until DOM is completely loaded in IE8

I'm performing a lot of DOM manipulations (such as moving images within divs that are positioned below each other into a stacking order and moving all divs off stage w/e of one).The external "js" file uses the ready event (the "js" file is included in the head after the "css" file).

jQuery(function($) {
   :
   :
});

What I'm finding using Firefox and Safari (single stepping) are that operations on the DOM are taking place as the code is executing. If the code implements a move on a div, the div moves.

On IE8, using the debugger this does not happen. Nothing exe开发者_运维百科cutes until the script is returned back to the jQuery Library; the library, then verifies that the DOM is completely loaded and then all the jQuery operations are execute immediately.

I'm using jQuery-1.4.4 and following the steps in the library for IE8 below is what occurring. (Note: The comments are those that are above the lines.

Line 452 - Trigger any bound events
Line 417 - Handle when the DOM is ready
Line 422 - Make sure the DOM is not already loaded
Line 424 - Make sure body exists
Line 429 - Remember that the DOM is ready
Line 432 - If a normal DOM Ready event fired, decrement ..
Line 437 - If there are functions bound, to execute (my script executes at this point)
Line 890 - The DOM ready check for IE

Firefox executes the following lines in the library when my script returns

Line 452 - Trigger any bound events
Line 855 - Cleanup functions for the document ready method

Therefore, what I see is clean rendering in FireFox, Safari and Chrome in both OSX and XP. In XP IE8, everything appears as if JavaScript was disabled until the DOM is completely loaded.

Please, I need some suggestions on how to correct this.

I've run into the same problem when using a large number of accordions nested within a tabbed panel for a company directory.

This is a workaround for the symptom (that your unmodified HTML is being displayed for a few seconds) but not a solution to the problem (IE8's appallingly slow JavaScript and HTML engine).

• Make sure the problem page elements are wrapped in something like the following:
  <div id="blockToHide" style="display: none;">
  [ your tabs/accordions/other jquery modified content ]
  </div>
• Add the following immediately following your jquery calls in the of the document: $('#blockToHide').style('display', 'block');

This will ensure that your block of HTML is hidden until after JQuery's done it's accordion-creation magic.