如何使用jQuery显示“繁忙”指标？

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

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

这只是一个显示/隐藏animationgif的问题，还是有一个更优雅的解决scheme？

Answer 1

你可以显示/隐藏一个gif，但是你也可以把它embedded到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文档build议做如下的事情：

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

其中#loading是你的繁忙指标的元素。

参考文献：

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

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

• 另外， jQuery.ajaxSetup API明确build议避免使用jQuery.ajaxSetup ：

  注意：全局callback函数应该使用它们各自的全局Ajax事件处理方法 – .ajaxStart() .ajaxStop() .ajaxComplete() .ajaxError() .ajaxSuccess() .ajaxSend() $.ajaxSetup()的options对象。

Answer 3

我倾向于像其他人所说的那样显示/隐藏IMG。 我发现一个很好的网站，生成“加载的GIF”

链接我只是把它放在一个div ，默认情况下隐藏display: none; （css）然后当你调用该函数显示图像时，一旦完成将其隐藏一次。

Answer 4

是的，这只是一个显示/隐藏animationgif的问题。

Answer 5

我在我的项目中做到了，

以gif作为底层url，这不过是animationGIF

 <div class="busyindicatorClass"> </div> .busyindicatorClass { background-url///give animation here } 

在你的ajax调用中，将这个类添加到div，并在ajax成功删除类。

它会做的伎俩。

让我知道如果你需要别的东西，我可以给你更多的细节

在ajax成功删除类

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

Answer 6

我在我的项目中做到了这一点：

application.js中的全局事件：

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

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

参考文献： http ： //api.jquery.com/Ajax_Events/

Answer 7

我不得不使用

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

Answer 8

稍微扩展Rodrigo的解决scheme – 对于经常执行的请求，如果请求花费的时间超过最小时间间隔，您可能只想显示加载映像，否则映像将不断popup并快速消失

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

Answer 9

老线程，但我想更新，因为我今天工作在这个问题上，我没有jquery在我的项目，所以我做了简单的老javascript方式，我也需要阻止在屏幕上的内容，所以在我的xhtml

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

在我的JavaScript

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