Chrome中的微调，IE9在同步ajax get请求期间不可见

Question

我想让我的用户在ajax请求期间看到一个旋转器。我的微调器在Firefox13上运行得很好，但是在Chrome和IE9上却不能工作，尽管我的ajax请求花了相当长的时间。大概1,2秒。

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

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

    /* synchronous  ajax fetch and manipulation goes here */

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

如果我移除$('.fileManager-spinner').hide();线，它会变得可见，并开始在Chrome和IE中旋转。但是，当这条线存在时，它不会变得可见。

或者，如果我调试代码并在.show()和.hide()之间暂停执行，它也会停留在屏幕上。但正如我所说，在正常情况下，不可能看到旋转器。

这是旋转器。

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

下面是微调器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;
}

可能的问题是什么？

谢谢。

Answer 1

从您在这里展示的内容可以看出，您正在执行同步ajax查询。在这个查询过程中，Chrome的引擎不会离开javascript线程，也不会更新屏幕。

您应该使用异步ajax请求，并简单地删除回调中的微调函数。

请注意，同步ajax查询将在jquery的下一个版本(1.8)中弃用。

您可以使用

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

参见jquery ajax done, always and fail functions。

Answer 2

Ajax应该是非阻塞的。您需要在返回Ajax请求后运行的函数中进行隐藏。

所以..。

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

应该行得通。

Answer 3

在$.ajax调用中使用内置的success参数，以便在调用成功返回时执行函数。

我不确定您使用同步调用是否有特定的原因，但如果没有，我建议切换到异步调用。