为什么我的微调GIF停止,而jQuery的Ajax调用正在运行?

我只是开始从ASP.NET UpdatePanels中断开自己。 我正在使用jQuery和jTemplates将Web服务的结果绑定到网格,并且一切正常。

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

这是在IE7中 – 还没有机会在其他浏览器中testing。 有什么想法吗? ajax调用或客户端数据绑定如此耗费资源以至于浏览器无法使用animationGIF?

更新

这是刷新网格的代码。 不知道这是同步还是asynchronous。

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()方法默认是asynchronous的。 只是踢我添加了这个

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

并没有任何区别。

这不是Ajax调用冻结浏览器。 这是成功处理程序(applyTemplate)。 像这样插入HTML文件可以冻结IE浏览器,这取决于HTML的数量。 这是因为IE用户界面是单线程的; 如果你注意到,实际的IE菜单也会被冻结。

作为testing,请尝试:

 applyTemplate = function(msg) { return; } 

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

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

这只是将图像源设置为之前的版本,但显然足以让IE走出困境。

编辑:我想我记得是什么原因造成的:我们正在加载animation到一个div显示:无。 IE加载它并且不启动animation,因为它是隐藏的。 不幸的是,当您将包含块设置为显示:block时,它不会启动animation,因此我们使用上面的代码行来欺骗IE重新加载图像。

图像冻结,因为它被隐藏的animation是由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; }); }); 

你确定在AJAX调用期间,GIF不在旋转吗?

在你的concessions.aspx把这行放在处理GetConcessions的地方:

 System.Threading.Thread.Sleep(5000); 

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

我知道这个问题是关于asynchronousajax调用。 不过,我想补充说,我已经在我的testing中find了以下有关同步ajax调用的内容:

对于同步ajax调用。 呼叫正在进行中(即等待服务器响应)。 对于testing,我在服务器上的服务器响应延迟。

Firefox 17.0.1 – animationGIF继续正确animation。

Chrome v23 – animationGIF在请求正在进行时停止animation。

好吧,这是有很多原因的。 首先,当服务器的ajaxcallback,你会感觉你的gif冻结了几个毫秒,但并不多。 在您开始处理信息之后,根据您操作的对象以及如何操作,您的GIF冻结时间将缩短。 这是因为线程忙于处理信息。 例如,如果你有1000个对象,你做了一个命令,并移动信息,并且还使用jquery和追加,插入,$ .each命令,你会感觉到GIF冻结。 有时它是不可能的,避免所有冻结的GIF,但玉可以限制时间几毫秒这样做:做一个响应Ajax的列表,并处理它每2秒(这将你的结果在一个单独的arrays,你会使用一个setInterval调用它,并避免当前响应仍在处理时尝试处理一个响应的瓶颈)。 如果你使用JQuery,不要使用$ .each,用于。 不要使用dom操作(追加,插入等),使用html()。 在简历中做更less的代码,重构,然后处理所有的回应(如果你做了更多的1),只有1。

我有一个类似的问题,浏览器冻结。 如果您正在本地进行开发和testing,出于某种原因它会冻结Web浏览器。 上传我的代码到一个Web服务器后,它开始工作。 我希望这会有所帮助,因为花了我几个小时才弄明白。

你正在做同步呼叫或asynchronous呼叫? 同步通话确实会导致浏览器在通话期间似乎locking。 另一种可能性是系统正在忙于做任何工作。

过去我曾经看到过这种行为,当进行AJAX调用时。 我相信这与浏览器只有单线程有关,所以当AJAX调用返回时线程正在调用,所以animationGIF需要暂时停下来。

dennismonsewicz的答案是很重要的。 使用spin.js和网站http://fgnass.github.com/spin.js/显示的步骤是很容易的。; 在繁重的过程中,我们应该使用CSSanimation。 由于单线程限制,不应使用JS驱动的animation和GIF,否则animation将冻结。 CSSanimation是从UI线程中分离出来的。

setTimeout函数中调用ajax调用帮助我防止gifanimation的冻结:

 setTimeout(function() { $.get('/some_link', function (response) { // some actions }); }, 0); 
  1. 浏览器是单线程和multithreading的。 对于任何浏览器:
  2. 当你调用一个函数包含一个嵌套的ajax函数时,//代码在这里java / servlet / jsp放置代码Thread.sleep(5000); 在servlet中了解ajax中的asynchronous时真或假。

     function ajaxFn(){ $('#status').html('WAIT... <img id="theImg" src="page-loader.gif" alt="preload" width="30" height="30"/>'); $('#status').css("color","red"); $.ajax({ url:"MyServlet", method: "POST", data: { name: $("textarea").val(), id : $("input[type=text]").val() }, //async: false, success:function(response){ //alert(response); //response is "welcome to.." $("#status").text(response); }, complete:function(x,y){ //alert(y) }, error:function(){ $("#status").text("?"); } }); $('#status').css("color","green"); 

    }

Async:对于单线程浏览器是真的,所以dom将立即加载。 而且不要把目标放在成功的里面,因为成功的function要等到响应。 所以直到那个时候你的dom不会得到负担。