title: Show spinner image before loading DIV
body: <p>I have tried to work this out but not getting anywhere with it. Basically I would like my custom spinner loader image to appear first for few seconds then it fades out and then the Div with id=home should then fadeIn with all its contents.</p>
  
  <p>I have tried several approach but not close to desired result. If there is any useful link that would help please post link.</p>
  
  <p>My HTML page:</p>
  
  <pre><code>&lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/mystyles.css"/&gt;
      &lt;link rel="stylesheet" href="css/mytheme.min.css" /&gt;
      &lt;link rel="stylesheet" href="css/structure-1.3.2.css" /&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /&gt;
      &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/myscript.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="css-loader-icon"&gt;&lt;img src="css/images/loader.gif"/&gt;&lt;/div&gt;
  &lt;!-- Page: home --&gt;
  &lt;div id="home" data-role="page" data-position="fixed" data-theme="a" data-title="My first app"&gt;
      &lt;div data-role="navbar" data-mini="true"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#home" class="css-hnav" &gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#home" class="css-hnav" &gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;&lt;!-- navbar --&gt;
      &lt;div data-role="content" class="css-listview"&gt;
          &lt;ul class="css-ul-list"&gt;
              &lt;a href="#blog" data-role="button" data-mini="true"&gt;My Blogs&lt;/a&gt;
              &lt;a href="#tweets" data-role="button" data-mini="true"&gt;Tweet with me&lt;/a&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;&lt;!-- page --&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(function() {
      $(".css-loader-icon").fadeOut(2000, function() {
          $("#home").fadeIn(1000);        
      });
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.css-loader-icon {
      display:    none;
      position:   fixed;
      z-index:    1000;
      top:        0;
      left:       0;
      height:     100%;
      width:      100%;
  }
  
  #content {display:none;}
  </code></pre>