Try giving this a read:
http://www.learningjquery.com/2008/10/1-awesome-way-to-avoid-the-not-so-excellent-flash-of-amazing-unstyled-content
On Mar 16, 3:33 pm, jhm <jmay...@gmail.com> wrote:
> I get an annoying flash in IE when I go to a page. I'm wondering if
> there is a good way around it.
>
> It's my 2nd & 3rd level navigation. I have a collapsing menu that is
> intended to only show the 3rd level nav once its corresponding 2nd
> level is selected. In case javascript is turned off, I have them all
> visible in my markup, and then hide them on page load. In IE, it shows
> the expanded menu first then hides them, thus the annoying flash.
>
> Here's the code:
>
> $(document).ready( function() {
> $('.nav3').hide();
> $('.nav2 li a').removeClass('selected');
> $('.nav2 li a:first').addClass('selected');
> });
>
> Here's the markup:
>
> <div class="nav2">
> <ul>
> <li>
> <a href="#">Menu One</a>
> </li>
> <li>
> <a href="#">Menu Two</a>
> <ul class="nav3">
> <li><a href="#">One</a></li>
> <li><a class="last" href="#">Two</a></li>
> </ul>
> </li>
> <li>
> <a href="#">Menu Three</a>
> </li>
> <li>
> <a href="#">Menu Four</a>
> <ul class="nav3">
> <li><a href="#">One</a></li>
> <li><a class="last" href="#">Two</a></li>
> </ul>
> </li>
> <li>
> <a href="#">Menu Five</a>
> </li>
> </ul>
> </div>
>
> Anyone see how I could do this better and eliminate the flash?
>
> Thanks!
