How to remove flash of unstyled content with jQuery

Sometimes there is a delay after the web page content is loaded and javascript has set up styling. It's easy to hide the unstyled content until it's ready when using jQuery.

by Scot Ranney

HTML

<div class="container">
  <div class="left-column">
    <h3>Menu: 2 second delay</h3>
    <ul class="left-menu">
      <li>Choice A</li>
      <li>Choice B</li>
      <li>Choice C</li>
    </ul>
  </div>
  <div class="menu-content">
    <h3>Menu Displays When Ready</h3>
    <p>
      The script below pauses for two seconds before the menu will be shown.
    </p>
    <p>
      The .delay(2000) in the javascript forces a 2 second delay just for the example. If you were using this for real, you would change the javascript by removing .delay(2000) and adding the function you are waiting for.
    </p>
    <p>
      In my case, it was a jQuery tree plugin (easytree.js) that was flashing content. The initializing function call is easytree() and the content flash was solved like this:
    </p>
    <p>
      $('.left-menu').show(0).easytree();
    </p>
  </div>
</div>

CSS

.left-column {
  float: left;
  padding: 0 10px 0 10px;
}

.left-menu {
  display: none;
}

.menu-content {
  float: left;
  border-left: 1px solid orange;
  padding-left: 10px;
  width: 70%;
}

JavaScript

$('.left-menu').delay(2000).show(0);