Spinner in Chrome, IE9 does not become visible during synchronous ajax get request

问题

I want my users to see a spinner during ajax request. My spinner works perfectly on Firefox 13. However, in Chrome and IE9 it is not working, although my ajax request takes quite a time. Like 1,2 seconds.

$('#fileManager').on('click', '.navSpan', function() {

    /* show spinner */
    $('.fileManager-spinner').show();

    /* synchronous  ajax fetch and manipulation goes here */

    /* hide spinner when done */
    $('.fileManager-spinner').hide();
}

If I remove $('.fileManager-spinner').hide(); line, it becomes visible and starts spinning in Chrome and IE too. However, when that line exists,it is not becoming visible.

Or if I debug the code and pause execution between .show() and .hide(), it also stays on the screen. But as I said, in normal conditions, it is impossible to see the spinner.

This is the spinner.

<div class="fileManager-spinner" style="display: none;"></div>

Below is the spinner css.

.fileManager-spinner
{
    position:relative;
    top: 50%;
    left: 50%;
    margin-left: -50px; /* half width of the spinner gif */
    margin-top: -50px; /* half height of the spinner gif */
    text-align:center;
    z-index:1234;
    overflow: auto;
    width: 100px; /* width of the spinner gif */
    height: 102px; /*hight of the spinner gif +2px to fix IE8 issue */  
    background-image: url(../../Images/fileManager/loader/loaderBig.gif);
    background-repeat:no-repeat;
}

What could be the problem ?

Thanks.

回答1:

I guess from what you show here that you're doing synchronous ajax queries. During this query, Chrome's engine doesn't leave the javascript thread and doesn't update the screen.

You should use an asynchronous ajax request and simply remove the spinner in the callbacks.

Please note that synchronous ajax queries will be deprecated in next version of jquery (1.8).

You can use

// show spinner
$.ajax({
  url: "http://fiddle.jshell.net/favicon.png",
  // some things
}).done(function ( data ) {
  // remove spinner
});

See jquery ajax done, always and fail functions.

回答2:

Ajax should be non blocking. You will need to make your hide happen in a function that runs after the return of your Ajax request.

So...

$.ajax(...).done(function(){ $(".fileManager-spanner").hide(); });

Should work.

回答3:

Use the built in success parameter on your $.ajax call to execute a function when the call returns successfully.

I'm not sure if there's a specific reason you're using synchronous calls, but if not, I would recommend switching to asynchronous calls.

来源：https://stackoverflow.com/questions/11452817/spinner-in-chrome-ie9-does-not-become-visible-during-synchronous-ajax-get-req

标签

jquery

css

google-chrome

internet-explorer-9