jQuery-为什么此代码会逐步执行，但无法实时运行(显示微调框，然后显示加载) [英] jQuery - Why does this code work in step through, but not in real time (show spinner, followed by load)

问题描述

为什么运行此代码时看不到微调器图像?但是，当我使用firebug调试它时，我确实在开头看到了文本/旋转图像:

Why do I not see the spinner image when I run this code? However when I debug through it using firebug I do see the text/spinner image at the beginning:

<div id="spinner">
  <img src="/images/ajax-loader.gif"/>
  Text
</div>

<div id="events">
</div>

<script type="text/javascript" charset="utf-8">

 function load_events() {
   $("#events").load("robots.txt");
 }

 $(document).ready(function(){
   $("#spinner").show()
   $("#events").hide()

   setTimeout("load_events()",2000);
   $("#events").show()
   $("#spinner").hide()

 });

</script>

谢谢

PS.特别是我需要它，以便微调框将一直显示，直到加载"的AJAX响应实际上全部返回为止(直到加载事件本身开始，因为我正在调用的API仍然需要几秒钟的时间)返回内容)

PS. In particular I need it so the spinner will keep showing until the AJAX response from the "load" actually all comes back (not until the load event itself starts, as the API I'm calling then still takes a couple of seconds before it comes back with the content)

PSS.反馈后我正在使用的最新代码.仍然遭受上面PS中指出的问题.

PSS. Latest code I'm using after feedback. Still suffers from issue noted in the PS above.

<div id="spinner"> <img src="/images/ajax-loader.gif"/> </div>

<div id="events"> </div>

<script type="text/javascript" charset="utf-8">

 $(document).ready(function(){
   $("#spinner").show();
   $("#events").hide();

   setTimeout(function(){
     $("#events").load("weekends/concerts_display");
     $("#events").show();
     $("#spinner").hide();
   },10);

 });

</script>

推荐答案

您还可以考虑使用jQuery的ajaxStart和ajaxStop方法来显示和隐藏gif，而不是setTimeout.这样做的好处是它应该插入页面上的所有ajax，因此您只需编写一次就可以忘记它.

You might also consider using jQuery's ajaxStart and ajaxStop methods for showing and hiding your gif, rather than a setTimeout. The nice thing about doing it this way is that it should kick in for any ajax on the page, so you can program it once and forget it.

$('body').ajaxStart(function(){
  $('#spinner').show();
});
$('body').ajaxStop(function(){
  $('#spinner').hide();
});

这篇关于jQuery-为什么此代码会逐步执行，但无法实时运行(显示微调框，然后显示加载)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！