title: Show Loading image Until div fully loaded
body: <p>I'm trying to show a loading image until a div content is fully loaded.</p>
  
  <ol>
  <li>First hide <code>.main-slider div</code></li>
  <li>Add class <code>.loading</code> to <code>.main-slider</code>: <code>&lt;div id="main-slider loading"&gt;&lt;/div&gt;</code></li>
  <li>When <code>.main-slider div</code> elements has loaded</li>
  <li><code>.loading</code> will be remove</li>
  <li>Then fade in <code>.main-slider div</code></li>
  </ol>
  
  <p>html </p>
  
  <pre><code> &lt;div class='sly-main-slider'&gt;
   &lt;div&gt; &lt;!-- Content --&gt;
   &lt;img src="http://4.bp.blogspot.com/-gk6rnMRH9qE/VXJ40BWuC4I/AAAAAAAABZs/BWesiVwBgfg/s1050/camera-girl-nikon-photography-Favim.com-205093.jpg"/&gt;
   &lt;/div&gt;
   &lt;/div&gt; &lt;!--sly-main-slider end--&gt;
  </code></pre>
  
  <p>jquery tries, here's a <a href="http://jsfiddle.net/och42noo/" rel="nofollow">fiddle</a>:</p>
  
  <pre><code>// when user browses to page
  $(".sly-main-slider div").hide();
  $(".sly-main-slider").addClass("loading");
  
  $(".sly-main-slider div").load(function() {
    // Handler for .load() called.
    $(".sly-main-slider div").show();
    $(".sly-main-slider").removeClass("loading");
  });
  </code></pre>