Question

如何在网页中的特定点显示旋转的“忙”指示符？

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

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

Answer 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

Answer 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() - 而不是options的{{1}}对象。

Answer 3

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

Link 我只是将它放在div内并默认隐藏display: none;（css）然后当你调用该函数时显示图像，一旦它完全隐藏它。

Answer 4

是的，这只是显示/隐藏GIF动画的问题。

Answer 5

我在我的项目中做到了，

用背景地址网址制作一个div作为gif，这只不过是动画gif

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

“loading”是要显示和隐藏的元素！

参考文献： 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

为了扩展罗德里戈的解决方案 - 对于经常执行的请求，如果请求超过最小时间间隔，您可能只想显示加载图像，否则图像将不断弹出并迅速消失

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}/images/spinner.gif" style="display: none;"/>

在我的javascript中

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

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

9 个答案: