Chrome中的微调器，IE9在同步Ajax获取请求期间不可见 [英] Spinner in Chrome, IE9 does not become visible during synchronous ajax get request

问题描述

我希望我的用户在ajax请求期间看到微调框.我的微调器可以在Firefox 13上完美运行.但是，在Chrome和IE9中，尽管我的ajax请求需要花费很长时间，但它无法正常工作.大约1,2秒.

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();
}

如果我删除$('.fileManager-spinner').hide();行，该行将变得可见，并且也会在Chrome和IE中开始旋转.但是，当该行存在时，它就不再可见.

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.

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

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.

这是微调器.

<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;
}

可能是什么问题?

谢谢.

推荐答案

我从这里显示的内容中推测您正在执行同步ajax查询.在此查询期间，Chrome浏览器的引擎不会离开javascript线程，也不会更新屏幕.

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.

您应该使用异步ajax请求，并只需删除回调中的微调器即可.

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

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

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

您可以使用

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

请参见 jquery ajax完成，始终和失败功能.

这篇关于Chrome中的微调器，IE9在同步Ajax获取请求期间不可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！