为什么我的微调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, ... 

并没有任何区别。

Answer 1

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

作为testing，请尝试：

 applyTemplate = function(msg) { return; } 

Answer 2

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

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

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

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

Answer 3

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

Answer 4

你确定在AJAX调用期间，GIF不在旋转吗？

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

 System.Threading.Thread.Sleep(5000); 

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

Answer 5

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

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

Firefox 17.0.1 – animationGIF继续正确animation。

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

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

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

Answer 11

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

 setTimeout(function() { $.get('/some_link', function (response) { // some actions }); }, 0); 

Answer 12

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不会得到负担。