Question

我希望我的用户在ajax请求期间看到一个微调器。我的微调器在Firefox 13上完美运行。但是，在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请求，只需删除回调中的微调器。

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

您可以使用

// 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

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

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

Chrome中的Spinner，IE9在同步ajax get请求期间不会显示

3 个答案: