如何用jQuery显示“忙”指示器？

如何在网页的特定位置显示旋转的“忙碌”指示器？

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

真的只是显示/隐藏动画gif的问题，还是有一个更优雅的解决方案？

您可以只显示/隐藏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

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()比内-ratheroptions的对象$.ajaxSetup()。

正如其他人所说，我倾向于只显示/隐藏IMG。我找到了一个可以生成“加载gif图像”的好网站

链接 我只是将其放在a内，div并且默认情况下隐藏display: none;（css），然后在调用函数show image时，一旦完成将其再次隐藏。

是的，这实际上只是显示/隐藏动画gif的问题。

我在我的项目中做到了

制作一个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
  }

为了稍微扩展Rodrigo的解决方案-对于频繁执行的请求，您可能只想在请求花费的时间超过最小时间间隔的情况下显示加载图片，否则该图片会不断弹出并迅速消失

var loading = false;

$.ajaxSetup({
    beforeSend: function () {
        // Display loading icon if AJAX call takes >1 second
        loading = true;
        setTimeout(function () {
            if (loading) {
                // show loading image
            }
        }, 1000);            
    },
    complete: function () {
        loading = false;
        // hide loading image
    }
});

我在我的项目中做到了：

application.js中的全局事件：

$(document).bind("ajaxSend", function(){
   $("#loading").show();
 }).bind("ajaxComplete", function(){
   $("#loading").hide();
 });

“加载”是显示和隐藏的元素！

参考：http : //api.jquery.com/Ajax_Events/

我不得不用

HTML:
   <img id="loading" src="~/Images/spinner.gif" alt="Updating ..." style="display: none;" />

In script file:
  // invoked when sending ajax request
  $(document).ajaxSend(function () {
      $("#loading").show();
  });

  // invoked when sending ajax completed
  $(document).ajaxComplete(function () {
      $("#loading").hide();
  });

旧线程，但是我想更新，因为我今天已经解决了这个问题，我的项目中没有jquery，所以我用普通的旧javascript方式做到了，我还需要阻止屏幕上的内容，所以在我的xhtml中

    <img id="loading" src="#{request.contextPath}/images/spinner.gif" style="display: none;"/>

在我的JavaScript中

    document.getElementsByClassName('myclass').style.opacity = '0.7'
    document.getElementById('loading').style.display = "block";