title: How to delay the display of some HTML until after javascript has loaded
body: <p>When a page loads on my site, the HTML appears before the javascript, which leads to a flicker when the javascript loads. The answer to <a href="https://stackoverflow.com/questions/3629762/display-html-page-after-loading-complete">this stackoverflow post</a> gave a great solution. But I would like to load at least some of the HTML before the Javascript so that the user is not faced with a blank page during a slow connection. For example, I would like to load the header immediately, but wait to load the HTML for the javascript enhanced accordion until after the javascript loads. Any suggestions? </p>
  
  <p>Here's the code that I borrowed from the answer linked above:</p>
  
  <p>CSS:</p>
  
  <pre><code>#hideAll
   {
     position: fixed;
     left: 0px; 
     right: 0px; 
     top: 0px; 
     bottom: 0px; 
     background-color: white;
     z-index: 99; /* Higher than anything else in the document */
  
   }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div style="display: none" id="hideAll"&gt;&amp;nbsp;&lt;/div&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code> window.onload = function() 
       { document.getElementById("hideAll").style.display = "none"; }
  
  &lt;script type="text/javascript"&gt;
     document.getElementById("hideAll").style.display = "block";
   &lt;/script&gt; 
  </code></pre>