title: Stop browser locking during (synchronous) Ajax?
body: <p>What I am trying to do is append a loading image to a div (so the user knows something is loading) and then I call a jquery ajax function, which is set to "async: false".  Here is my code:</p>
  
  <pre><code>$jQuery("#playersListDiv").html(loadingImage);    
  $jQuery.ajax({
           type: "POST", /* this goesn't work with GET */
           url: urlValue, /*ex: "NBAgetGamesList.php" */
           data: parameters, /*ex: "param1=hello" */
           cache: false,
           async: false,
                       success: function(data){
  
                       }
  });
  </code></pre>
  
  <p>The problem is that the browser locks and does not append the loading image until AFTER the ajax call is done which is useless of course.  Firefox is the only browser that actually appends the loading image.  IE, Chrome, and Safari DO NOT append the loading image.</p>
  
  <p>I know browser locking happens because async is set to false but this is my only option because I have to wait for this request to complete before continuing because I need the data that is returned.</p>
  
  <p>Is there any way around this?  If I place an alert after the I append the loading image that works but I don't want an alert popping up every time.</p>