jQuery Superfish menu - flash of unstyled markup - menu only

[Shodan]

Hi there,

I've got a Superfish menu on a page I'm working on but I'm getting a flash of the unstyled list before the menu loads properly.

I think this is slightly different to the fairly rare "flash of unstyled content" bug as the CSS backgrounds and other CSS are being loaded ok at the same time as the unstyled list is flashed up.

This only seems to happen in Internet Explorer

Here's the page it's happening on:

http://vse.nmdemo.net/

Any ideas?

Cheers,
Terry

[paul_wilkins]

The problem is this code:

$(document).ready(function() {
  $("#vsee2_top_nav ul").addClass("sf-menu");
  ...
});

The solution is to move the script to the bottom of the body, just before the </body> tag, remove the document ready part, and run the code directly without waiting for the page to have fully loaded.

$("#vsee2_top_nav ul").addClass("sf-menu");
...

Ideally all of page scripts should be placed at the end, jsut before the </body> tag.
See best practices for speeding up your web site for more information.

[Shodan]

Hi there,

Thanks for the advice. Unfortunately, I've implemented what you've suggested but it hasn't made any difference

Any other ideas?

Cheers,
Terry

[JimmyP]

@Paul, surely moving the script to the bottom of the document is the same as checking whether the DOM is ready? (After all that's what $(document).ready({}) does...)

[paul_wilkins]

the document ready technique isn't as efficient, and on some web browsers (like IE) it's not properly supported so it has to wait for the whole page to load.

In web browsers that properly support the document ready technique there's no problem. A common complaint though is that document ready is too slow on IE.

The solution, place the script at the bottom of the page and guarantee that there won't be a problem. A nice side-benefit is that according to the best practices to speed up your web site, the page loads faster too.