Stop browser locking during (synchronous) Ajax?

Question

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\".

Answer 1

Despite your assertion to the contrary you don't need it to be synchronous. Whatever you need to do with/after the response can be done in the success (and/or error or complete) callback. So change:

$jQuery("#playersListDiv").html(loadingImage);    
$jQuery.ajax({
   ...
   async: false,
   ...
});
// OTHER CODE

to be like this:

$jQuery("#playersListDiv").html(loadingImage);    
$jQuery.ajax({
   ...
   async: true,
   success: function(data) {
      // OTHER CODE
   }
});

Or move "OTHER CODE" to a separate function that you call from the success callback.

If you need something more complicated than that you could encapsulate the above in a function and pass a callback to it:

function doAjaxStuff(callback) {
    $jQuery("#playersListDiv").html(loadingImage);    
    $jQuery.ajax({
       ...
       async: true,
       success: function(data) {
          // optional other processing here, then:
          callback(data);
       }
    });
}

// then from somewhere else in your code:
doAjaxStuff(function(data) {
   // do something with data
});