为什么我的微调器GIF在jQuery ajax调用运行时停止？

我刚开始从ASP.NET UpdatePanels中解脱出来.我正在使用jQuery和jTemplates将Web服务的结果绑定到网格,一切正常.

这是事情:我正在尝试在刷新表时显示一个微调器GIF(在ASP.NET中的UpdateProgress)我已经完成了所有工作,除了微调器被冻结.为了看看发生了什么,我尝试将微调器从更新进度div中移出,然后在我可以一直看到的页面上移出.它会旋转并旋转直到刷新开始,并保持冻结直到刷新完成,然后再次开始旋转.不是你想要的'请等待'微调器!

这是在IE7中 - 还没有机会在其他浏览器中测试.有什么想法吗？是ajax调用还是客户端数据绑定如此资源密集,以至于浏览器无法使用其动画GIF？

更新

这是刷新网格的代码.不确定这是同步还是异步.

updateConcessions = function(e) {
    $.ajax({
        type: "POST",
        url: "Concessions.aspx/GetConcessions",
        data: "{'Countries':'ga'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
            applyTemplate(msg);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
        }
    });
}

applyTemplate = function(msg) {
    $('div#TemplateTarget').setTemplate($('div#TemplateSource').html());
    $('div#TemplateTarget').processTemplate(msg);
}

更新2

我刚检查了jQuery文档,$.ajax()默认情况下该方法是异步的.只是为了踢,我添加了这个

$.ajax({
    async: true,
    ...

它没有任何区别.

1> Chase Seiber..：

---

不是Ajax调用会冻结浏览器.它是成功处理程序(applyTemplate).将HTML插入到这样的文档中可以冻结IE,具体取决于HTML的数量.这是因为IE UI是单线程的; 如果你注意到,实际的IE菜单也会在发生这种情况时被冻结.

作为测试,尝试:

applyTemplate = function(msg) {
   return;
}

---

这似乎是在Chrome中发生的事情？!？

---

这也发生在我身上,但我的GIF文件停止了除Opera之外的所有浏览器中的动画.我测试了IE9,FF,Chrome,Opera和Safari.在Opera中,GIF文件是动画的,但它很迟钝.我的猜测是Opera正在抽出一些时间来重绘屏幕.但是对于所有其他浏览器,当我渲染HTML并将HTML爆炸到容器中以响应AJAX调用时,GIF文件完全被锁定.我知道倾向于将IE归咎于一切,但在这种情况下,IE的行为与FF,Chrome和Safari完全相同.

---

"效率更高."浏览器更像是它!

2> David..：

---

我不记得究竟是什么造成了它,但我们在忙碌的盒子里遇到了类似的IE6问题,我们用Javascript中的这个令人难以置信的黑客修复了它:

setTimeout("document.images['BusyImage'].src=document.images['BusyImage'].src",10);

这只是将图像源设置为之前的状态,但显然足以将IE推出其昏迷状态.

编辑:我想我记得造成这种情况的原因:我们将动画加载到div中,显示:无.IE加载它并且不启动动画,因为它是隐藏的.不幸的是,当你将包含块设置为display:block时,它不会启动动画,因此我们使用上面的代码行来诱骗IE重新加载图像.

3> ruffrey..：

---

图像冻结,因为隐藏时动画被IE禁用.

要解决此问题,请附加加载图像而不是取消隐藏它:

function showLoader(callback){
    $('#wherever').append(
        ''
    );

    callback();
}

function finishForm(){
    var passed = formValidate(document.forms.clientSupportReq);

    if(passed)
    {
        $('input#subm')
            .val('Uploading...')
            .attr('disabled','disabled');
        $('input#res').hide();
    }

    return passed;
}
$(function(){
    // on submit
    $('form#formid').submit(function(){
        var l = showLoader( function(){
                         finishForm() 
                    });

        if(!l){
            $('.waiting').remove();
        }

        return l;
    });
});