如何使用 jQuery 显示“忙碌”指示器？答案

【问题标题】：How to display a "busy" indicator with jQuery?如何使用 jQuery 显示“忙碌”指示器？
【发布时间】：2011-05-20 07:24:35
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript jquery

【解决方案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

【讨论】：

+1 表示ajaxSetup()。如果能给出关于global 属性的进一步解释，我会更愿意。
@RabidFire，这里实际上不需要全局，它只是用于$.ajax
@gov，gif的定位取决于布局，你可以隐藏/显示放置的div，而不是修改dom。
这看起来很有希望，但它对我不起作用，最终尝试了另一种有效的解决方案。 stackoverflow.com/questions/7003707/…
如果您有 2 个 XHR，并且第一个在第二个启动后立即完成，则即使第二个 XHR 仍在运行，此代码也会隐藏加载指示器。

【解决方案2】：

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

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

#loading 是其中包含忙碌指示符的元素。

参考资料：

http://api.jquery.com/ajaxStart/
http://api.jquery.com/ajaxStop/
此外，jQuery.ajaxSetup API 明确建议避免jQuery.ajaxSetup 用于这些：

注意：全局回调函数应该使用它们各自的全局 Ajax 事件处理方法来设置——.ajaxStart()、.ajaxStop()、.ajaxComplete()、.ajaxError()、.ajaxSuccess()、.ajaxSend()——而不是在 @987654334 @对象为$.ajaxSetup()。

【讨论】：

这些似乎比 beforeSend 和 complete 更有用，因为 ajaxStart 将“......注册一个处理程序以在第一个 Ajax 请求开始时被调用”，而 ajaxStop 将“......注册一个处理程序被调用当所有 Ajax 请求都完成时” - 这些处理并发异步消息并且不会过早隐藏“请等待”指示符。

【解决方案3】：

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

Link 我只是把它放在div 中并默认隐藏display: none; (css) 然后当你调用该函数时显示图像，一旦它完成再次隐藏它。

【讨论】：

【解决方案4】：

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

【讨论】：

同意。显示/隐藏图像很容易被所有浏览器理解。有几个用于图像的 jquery 旋转插件，但这些插件不适用于所有浏览器。
@mike 我的解决方案在所有浏览器中都适用于我的项目，你认为这是一个不错的方法

【解决方案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
  }

【讨论】：

【解决方案6】：

稍微扩展 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
    }
});

【讨论】：

【解决方案7】：

我在我的项目中做到了：

全球事件在 application.js 中：

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

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

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

【讨论】：

【解决方案8】：

我不得不使用

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();
  });

【讨论】：

【解决方案9】：

旧线程，但我想更新，因为我今天正在处理这个问题，我的项目中没有 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";

【讨论】：

“普通的旧 javascript 方式”是什么意思？你能进一步解释一下吗？你的意思是你用了XMLHttpRequest？