title: how to show div #loading whilst div #content loads
body: <p>i am wanting to implement a solution where:</p>
  
  <ol>
  <li>whilst contents in div #content are loading, </li>
  <li>hide div #content,</li>
  <li>show div #loading,</li>
  <li>then when div #content has loaded,</li>
  <li>hide div #loading,</li>
  <li>fade in div #content</li>
  </ol>
  
  <p>i have tried:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="content"&gt;
  &lt;!--this stuff takes a long time to load--&gt;
  &lt;img src="http://lorempixel.com/1920/1920/"&gt;
  &lt;/div&gt;
  &lt;div id="loading"&gt;
  &lt;!-- this is the loading gif --&gt;
  &lt;img src="http://lorempixel.com/400/200/"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>// when user browses to page
  $('#content').hide();
  $('#loading').show();
  
  // then when div #content has loaded, hide div #loading and fade in div #content
  $('#content').bind('load', function() {
  $('#loading').hide();
  $('#content').fadeIn('slow');
  });
  </code></pre>
  
  <p>here is the jsfiddle i am working on:</p>
  
  <p><a href="http://jsfiddle.net/rwone/Y9CQ4/">http://jsfiddle.net/rwone/Y9CQ4/</a></p>
  
  <p>thank you.  </p>