jquery loading an image while async false

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.)

$('#status' + itemNum).html("<img width='14px' src='/style/images/spinner.gif'>");
if (foo == "bar") {
$.ajax({
   type:"POST",
   url: "foobar.html",
   async:false,
   data: "val1=" + escape(newValue) + "&val2=" + fieldName + "&val3=" + newValue2
   })
} else {
$.ajax({
   type:"POST",
   url: "foobar.html",
   data: "val1=" + escape(newValue) + "&val2=" + fieldName + "&val3=" + newValue3
   })
   document.getElementById('status' + itemNum).innerHTML = "SAVED";
}
$("#status" + itemNum).show();
setTimeout("fade_out('"+itemNum+"')", 1000);
}

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.

Thanks!

Answers:

Answer

This is not possible.
Since Javascript runs in the UI thread, async: false will freeze the browserm including all animation.


Do not use async: false!

You need to fix your code to handle asynchronous requests.

Answer

async: false will lock the browser, resulting in all animations being paused until processing is allowed to continue. You can however get the graphic to at least show up before the ajax calls by placing the ajax calls inside of a setTimeout with a delay of 1ms or greater. It still will not animate though, even though it is an animated gif.


Of course, the above is just a bandaid, the better solution would be to not use async: false.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.