2

我希望我的用户在 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()and之间暂停执行.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;
}

可能是什么问题呢 ？

谢谢。

4

3 回答 3

2

我猜从您在这里展示的内容来看，您正在执行同步 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 和 fail 函数。

于 2012-07-12T13:27:56.017 回答
1

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

所以...

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

应该管用。

于 2012-07-12T13:32:14.340 回答
0

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

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

于 2012-07-12T14:39:18.817 回答