SitePoint Sponsor |
|
User Tag List
Results 1 to 5 of 5
-
Sep 18, 2008, 06:41 #1
- 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,
TerryTerry Morgan,
Lead developer / director,
Central Media UK Ltd.
w: Southampton web design and PHP development
-
Sep 18, 2008, 15:23 #2
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 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
-
Sep 19, 2008, 00:44 #3
- 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,
TerryTerry Morgan,
Lead developer / director,
Central Media UK Ltd.
w: Southampton web design and PHP development
-
Sep 19, 2008, 03:27 #4
- 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)
-
Sep 19, 2008, 20:00 #5
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 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