title: Load preloader before AJAX call
body: <p>I have an AJAX call I'm making.  It's synchronous so it 'hangs' while the content loads.  Before the AJAX call I append a preloading image to the soon-to-be parent node of the incoming content:</p>
  
  <pre><code>function makePreLoader( parentNode )
  {
    var img = document.createElement( "img" );
    img.src = "images/preloader.gif";
    parentNode.appendChild( img );
  }
  
  
  function getData( )
  {
    var parentNode = document.getElementById( "myParentNode" );
    makePreloader( parentNode );
  
    $.ajax( 
      "http://www.example.com/",
      {
        success: function( resp )
        {
          $( parentNode ).html( resp );
        },
        async: false
      }
    );
  }
  </code></pre>
  
  <p>My script at example.com is a simple php script that hangs 7 seconds and then replies "done".  </p>
  
  <p>When I call 'getData' the expected behavior is to see the preloading image load, and then it should be replaced by "done".</p>
  
  <p>The actual behavior is the call hangs (apparently without appending the preloader) and then loads the content.  </p>
  
  <p>Has anyone had a similar issue?  Can someone recommend a good solution?</p>