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

Question

我刚开始从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,
    ...

它没有任何区别.

Answer 1

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

作为测试,尝试:

applyTemplate = function(msg) {
   return;
}

Answer 2

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

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

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

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

Answer 3

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

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

function showLoader(callback){
    $('#wherever').append(
        '<img class="waiting" src="/path/to/gif.gif" />'
    );

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

Answer 4

您确定在 AJAX 调用期间 GIF 没有旋转吗？

在您的 concessions.aspx 中，将此行放在处理 GetConcessions 的某处：-

System.Threading.Thread.Sleep(5000);

我怀疑 gif 旋转了 5 秒然后冻结，同时 IE 渲染并绘制结果。