title: SEO-friendly solution to avoid a flash of unstyled content
body: <p>I am using the following JS to avoid a flash of unstyled content in a SEO-friendly way:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt; 
  $('#Container').addClass('fouc'); 
  $(document).ready(function() { 
      $('#Container').show(); 
  }); 
  &lt;/script&gt;
  </code></pre>
  
  <p>Which also has the accompanying CSS: <code>&lt;style&gt; .fouc {display:none;}&lt;/style&gt;</code>.</p>
  
  <p>What I am expecting to happen is that on page load, at the very minimum, my div #Container should at the class .fouc added, however, this only occurs if I manually add it via the console.</p>
  
  <p>Do I need some additional code etc in order to get this to function as expected? </p>
  
  <p>FYI, I am already calling JQuery prior to when this script is being called.</p>
  
  <p>Your help is appreciated!</p>