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

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

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

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

你可以显示/隐藏一个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

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对象。

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

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

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

我在我的项目中做到了,

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

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

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

它会做的伎俩。

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

在ajax成功删除类

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

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

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

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

老线程,但我想更新,因为我今天工作在这个问题上,我没有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";