Making an ajax request without blocking page load

I need to make a very slow ajax call on page load. The problem is that in chrome the little circle on the tab keeps spinning until the ajax call is complete. In firefox 4 and IE9 it works as expected.

currently I'm using

$(document).ready(function () {
   $.doTimeout(1000, slowRequest);
});

the timeout helps, since it allows the browser to continue, and if the browser is done before the timeout everything is fine, but I found that depending on how slow the client/开发者_JAVA技巧server is that time out might not be long enough.

Is there a better way to achieve this?

Honestly, I think you shouldn't care about the spinning circle on the browser, but do care about the order of execution of your code. I would simply do:

$(document).ready(function () {
   slowRequest();
});

Or, setTimeout(slowRequest, 0);, the point is to start your ajax request when you have already have the data to send, and where to recieve it.

With your delay of 1 second, you're avoiding the spinning circle in some browsers BUT sacrificing time (1 second of delay!). I think it's more important execution time than visual details.

Of course, your ajax request MUST be async (I hope it is), if not, the browser will hang.

Hope this helps. Cheers

Since you mentioned the issue happening with Chrome, on the script tag that contains the code to make your slow AJAX call, you could try adding the async attribute like this:

<script type="text/javascript" async="async">
...
</script>

I believe that attribute works in Firefox 3.6+ and Chrome, but not in any of the other browsers :(