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

Posted 2023-05-07

【中文标题】如何使用 jQuery 显示“忙碌”指示器？

【英文标题】：How to display a "busy" indicator with jQuery?

【发布时间】：2011-05-20 07:24:35

【问题描述】：

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

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

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

【参考方案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。

这看起来很有希望，但它对我不起作用，最终尝试了另一种有效的解决方案。 ***.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"  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？