jquery在异步错误时加载图像

时间:2011-09-28 20:09:53

标签: javascript jquery ajax gif

我希望为用户提供一个旋转的gif图像,以便在我使用jquery进行ajax调用时知道发生了什么。我必须使用async:false,否则代码会变得混乱,最终我们会遇到一个错误的会话变量。这就是我所拥有的(直到通话结束后才显示gif。)

$('#status' + itemNum).html("<img width='14px' src='/style/images/spinner.gif'>");
if (foo == "bar") {
$.ajax({
   type:"POST",
   url: "foobar.html",
   async:false,
   data: "val1=" + escape(newValue) + "&val2=" + fieldName + "&val3=" + newValue2
   })
} else {
$.ajax({
   type:"POST",
   url: "foobar.html",
   data: "val1=" + escape(newValue) + "&val2=" + fieldName + "&val3=" + newValue3
   })
   document.getElementById('status' + itemNum).innerHTML = "SAVED";
}
$("#status" + itemNum).show();
setTimeout("fade_out('"+itemNum+"')", 1000);
}

在这种情况下,我只想在foo = bar时使用async。任何人都可以告诉我为什么spinner.gif在通话后加载。我想这可能是因为微调器不在其他任何地方并且加载它有延迟,但是当它被多次调用时它仍然没有出现(到那时应该在缓存中),所以我很难过。

谢谢!

2 个答案:

答案 0 :(得分:9)

这是不可能的。
由于Javascript在UI线程中运行,async: false将冻结浏览器,包括所有动画。


使用async: false

您需要修复代码以处理异步请求。

答案 1 :(得分:3)

async: false将锁定浏览器,导致所有动画暂停,直到允许继续处理。但是,您可以通过将ajax调用置于setTimeout内并延迟1ms或更长时间来使图形至少显示在ajax调用之前。尽管它是一个GIF动画,但它仍然没有动画。


当然,以上只是一个绑定,更好的解决方案是不使用async: false