如何用jQuery显示"忙"指标？

Question

如何在网页中的特定点显示旋转的"忙"指示符？

我想在Ajax请求开始/完成时启动/停止指示符.

它真的只是显示/隐藏GIF动画的问题,还是有更优雅的解决方案？

Answer 1

你可以只显示/隐藏一个gif,但你也可以将它嵌入到ajaxSetup中,因此它会在每个ajax请求中被调用.

$.ajaxSetup({
    beforeSend:function(){
        // show gif here, eg:
        $("#loading").show();
    },
    complete:function(){
        // hide gif here, eg:
        $("#loading").hide();
    }
});

需要注意的是,如果你想在没有加载微调器的情况下执行特定的ajax请求,你可以这样做:

$.ajax({
   global: false,
   // stuff
});

这样我们以前的$ .ajaxSetup就不会影响请求了global: false.

更多详细信息,请访问:http://api.jquery.com/jQuery.ajaxSetup

Answer 2

jQuery文档建议执行以下操作:

$( document ).ajaxStart(function() {
  $( "#loading" ).show();
}).ajaxStop(function() {
  $( "#loading" ).hide();
});

其中#loading包含忙碌指示符的元素在哪里.

参考文献:

• http://api.jquery.com/ajaxStart/

• http://api.jquery.com/ajaxStop/

• 此外,jQuery.ajaxSetupAPI明确建议避免jQuery.ajaxSetup这些:

  注意:全局回调函数应该用各自的全局AJAX事件处理方法-设置.ajaxStart(),.ajaxStop(),.ajaxComplete(),.ajaxError(),.ajaxSuccess(),.ajaxSend()-rather比内options的对象$.ajaxSetup().

Answer 3

我倾向于像其他人所说的那样显示/隐藏IMG.我找到了一个很好的网站,生成"加载GIF"

链接 我只是把它放在一个div默认隐藏display: none;(css)然后当你调用函数显示图像时,一旦它完全隐藏它.

Answer 4

是的,这只是显示/隐藏GIF动画的问题.

Answer 5

我在我的项目中做到了，

制作一个 div ，背景 url 为 gif ，这只是动画 gif

<div class="busyindicatorClass"> </div>

.busyindicatorClass
{
background-url///give animation here
}

在您的 ajax 调用中，将此类添加到 div 中，并在 ajax 成功时删除该类。

它会做到这一点。

如果您需要其他信息，请告诉我，我可以为您提供更多详细信息

在 ajax 成功中删除该类

success: function(data) {
    remove class using jquery
  }