jQuery - Scripts slow to apply in IE6: Can anything be done?

Question

The answer is probably no, but in IE6, jQuery is slow to apply the jQueryUI accordion control, meaning the unstyled links behind the accordion are visible for probably a quarter to a half of a second before the accordion styling applies.

This is highly distracting, so I went ahead and hid the div and had jQuery unhide it when it loads.

The result is still distracting, although not as distracting. You don't see the effect in any modern browser, just IE6.

EDIT: I've updated the site below so that the entire content div is hidden and pops with jQuery. It's arguably worse.

See the result at: http://tekforge.org/spsu/

In Firefox or any modern browser, you won't notice a pop effect on the menu, but in IE6 you will notice a distinct popping effect.

Is there any way to improve the time in which the accordion applies, or is this just chalked up to a case of "IE6 is suck :("

Thanks! -Chris

NOTE:

I'm using:

$(document).ready(function(){

To start jQuery, at the top of the page. Perhaps there is another way to speed up the page?

Answer 1

To be honest I think the page just loads a bit slowly, probably due to your bandwidth. You could try gzipping it (how depends on your server).

As far as using .ready(), well that's the most appropriate time to be doing it. Hiding things until they are finished loading is also a good approach.

Though in general, if it can be avoided, I prefer to never applying styling via javascript upon load; you'd prefer to render it that way initially. Though maybe it can't be avoided in your case.

Regardless, I use IE6 and really didn't notice anything, aside from the images loading slightly slower than FF.

Answer 2

Try hiding the whole menu div and then slide in from the left to make it less jarring.

Answer 3

Don't worry about it. You've already achieved progressive enhancement with getting IE6 working. It being slow just comes with the territory of being IE6.

Answer 4

On the heading you can add

class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all"

On the div you can add the classes to the element

class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active"

and set the style to

style="display:none"