Why does my spinner GIF stop while jQuery ajax call is running?

Question

I'm just starting to wean myself from ASP.NET UpdatePanels. I'm using jQuery and jTemplates to bind the results of a web service to a grid, and everything works fine.

Here's the thing: I'm trying to show a spinner GIF while the table is being refreshed (à la UpdateProgress in ASP.NET) I've got it all working, except that the spinner is frozen. To see what's going on, I've tried moving the spinner out from the update progress div and out on the page where I can see it the whole time. It spins and spins until the refresh starts, and stays frozen until the refresh is done, and then starts spinning again. Not really what you want from a 'please wait' spinner!

This is in IE7 - haven't had a chance to test in other browsers yet. Any thoughts? Is the ajax call or the client-side databinding so resource-intensive that the browser is unable to tend to its animated GIFs?

Update

Here's the code that refreshes the grid. Not sure if this is synchronous or asynchronous.

updateConcessions = function(e) {
    $.ajax({
        type: "POST",
        url: "Concessions.aspx/GetConcessions",
        data: "{'Countries':'ga'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
            applyTemplate(msg);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
        }
    });
}

applyTemplate = function(msg) {
    $('div#TemplateTarget').setTemplate($('div#TemplateSource').html());
    $('div#TemplateTarget').processTemplate(msg);
}

Update 2

I just checked the jQuery documentation and the $.ajax() method is asynchronous by default. Just for kicks I added this

$.ajax({
    async: true,
    ...

and it didn't make any difference.

Answer 1

Are you doing a synchronous call or asynchronous call? synchronous calls do cause the browser to seemingly lock up for the duration of the call. The other possibility is that the system is very busy doing whatever work it is doing.

Answer 2

Along the lines of what Steve said, there's a discussion of the issue here. The recommendation there is to ensure animations are enabled in IE and use an AJAX call.

I have the same problem in IE, but it works fine in FF.

Answer 3

I have seen this behavior in the past when making AJAX calls. I believe this is related to the fact that browsers are only single threaded, so when the AJAX call is returned the thread is working on the call, so consequentially the animated GIF needs to stop momentarily.

Answer 4

Slightly related anecdote... I see this happen all the time when I'm running IE in VMware.

Answer 5

I don't remember precisely what caused it, but we had a similar issue with IE6 in a busy box and we fixed it with this incredible hack in the Javascript:

setTimeout("document.images['BusyImage'].src=document.images['BusyImage'].src",10);

That just sets the image source to what it was before, but it is apparently enough to jostle IE out of its stupor.

edit: I think I remember what was causing this: We were loading the animation into a div with display: none. IE loads it and doesn't start the animation, because it's hidden. Unfortunately it doesn't start the animation when you set the containing block to display: block, so we used the above line of code to trick IE into reloading the image.

Answer 6

Are you sure that its during the AJAX call that the GIF isn't spinning?

In your concessions.aspx place this line somewhere in the handling of GetConcessions:-

System.Threading.Thread.Sleep(5000);

I suspect that the gif spins for 5 seconds then freezes whilst IE renders and paints the result.

Answer 7

It's not the Ajax call that's freezing the browser. It's the success handler (applyTemplate). Inserting HTML into a document like that can freeze IE, depending on how much HTML there is. It's because the IE UI is single threaded; if you notice, the actual IE menus are frozen too while this is happening.

As a test, try:

applyTemplate = function(msg) {
   return;
}

Answer 8

I had a similar problem with the browser freezing. If you are developing and testing locally, for some reason it freezes the web browser. After uploading my code to a web server it started to work. I hope this helps, because it took me hours to figure it out for myself.