title: Preload div content while showing loader
body: <p>this seems to be hundred times answered question, but I can't find a working solution. </p>
  
  <p>I've got this code:</p>
  
  <pre><code>&lt;script&gt;
    $("#content div").hide();
    $("#loader").show();
  
    $("#content div").load("file.html", function () {
  
      $("#loader").fadeOut('slow', function() {
  
        $("#content div").fadeIn('slow');
  
      });
  
    });
  &lt;/script&gt;
  
  &lt;html&gt;
    &lt;div id="content"&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;img src="loader.gif" /&gt;
    &lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>As far as I'm concerned the stuff that is inside the load function should happen after the file.html is loaded, but it hides the loader image and shows content div (in this case huge image, but it can be anything) and it still loads this content - the loading process is not finished. Thanks.</p>