title: jquery loading an image while async false
body: <p>I want to give a spinning gif image for the user to know something is happening while I am doing an ajax call with jquery. I have to use async:false because otherwise the code gets confused and we end up with a bad session variable. Here is what I have (that does not show the gif until after the call has frozen the screen.)</p>
  
  <pre><code>$('#status' + itemNum).html("&lt;img width='14px' src='/style/images/spinner.gif'&gt;");
  if (foo == "bar") {
  $.ajax({
     type:"POST",
     url: "foobar.html",
     async:false,
     data: "val1=" + escape(newValue) + "&amp;val2=" + fieldName + "&amp;val3=" + newValue2
     })
  } else {
  $.ajax({
     type:"POST",
     url: "foobar.html",
     data: "val1=" + escape(newValue) + "&amp;val2=" + fieldName + "&amp;val3=" + newValue3
     })
     document.getElementById('status' + itemNum).innerHTML = "SAVED";
  }
  $("#status" + itemNum).show();
  setTimeout("fade_out('"+itemNum+"')", 1000);
  }
  </code></pre>
  
  <p>In this case I only want the async when foo = bar. Can anyone let me know why the spinner.gif loads after the call. I am thinking that might be because the spinner isn't anywhere else and there is a delay in loading it, but still it doesn't show up when called multiple times (should be in cache by then), so I'm stumped.</p>
  
  <p>Thanks!</p>