SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Southampton, Essex, UK
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery Superfish menu - flash of unstyled markup - menu only

    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
    Terry Morgan,
    Lead developer / director,
    Central Media UK Ltd.
    w: Southampton web design and PHP development

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    The problem is this code:

    Code javascript:
    $(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.

    Code javascript:
    $("#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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Southampton, Essex, UK
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Terry Morgan,
    Lead developer / director,
    Central Media UK Ltd.
    w: Southampton web design and PHP development

  4. #4
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @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...)
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •