jQuery Ajax Loading Image Hang

Question

I'm attempting to utilize a loading gif for an ajax call on a page of mine. I'm using jQuery's ajax method. My method looks like this:

$.ajax({
    type:'POST',
    data:{action:'yadayada',data:stuffToSend},
    cache: true,
    dataType: 'json',
    async:false,
    beforeSend:function(){
                var options={
                height:'100px',
                duration:1,
                width:'100px',
                }
                new ajaxLoader($("#search-right"), options);
    },
    url: "/wp-admin/admin-ajax.php",
    success: function(value) {
    //do stuff
    }
}

The image shows, but not until AFTER the ajax success function is finished. The ajaxLoader function is not the guilty party, as I have tried multiple methods of loading images; all exhibit the same behavior.

I've tried loading the images on the click handler that calls the ajax function, before calling the ajax function. Same results (so it's not the beforeSend function). My question is this: why is the loading image not 'loading' until after the ajax success?

Answer 1

Doh! The async:false was the guilty party! Changing to async:true solved it.