Javascript 如何使用 jQuery 显示“忙碌”指示器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4355268/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display a "busy" indicator with jQuery?
提问by Tony the Pony
How do I display a spinning "busy" indicator at a specific point in a web page?
如何在网页的特定点显示旋转的“忙碌”指示器？
I want to start/stop the indicator when an Ajax request commences/completes.
我想在 Ajax 请求开始/完成时启动/停止指示器。
Is it really just a matter of showing/hiding an animated gif, or is there a more elegant solution?
这真的只是显示/隐藏动画 gif 的问题，还是有更优雅的解决方案？
回答by Rodrigo
You can just show / hide a gif, but you can also embed that to ajaxSetup, so it's called on every ajax request.
您可以只显示/隐藏 gif，但您也可以将其嵌入到 ajaxSetup 中，以便在每个 ajax 请求时调用它。
$.ajaxSetup({
beforeSend:function(){
// show gif here, eg:
$("#loading").show();
},
complete:function(){
// hide gif here, eg:
$("#loading").hide();
}
});
One note is that if you want to do an specific ajax request without having the loading spinner, you can do it like this:
一个注意事项是，如果您想在没有加载微调器的情况下执行特定的 ajax 请求，您可以这样做：
$.ajax({
global: false,
// stuff
});
That way the previous $.ajaxSetup we did will not affect the request with global: false.
这样我们之前所做的 $.ajaxSetup 就不会影响global: false.
More details available at: http://api.jquery.com/jQuery.ajaxSetup
更多详细信息，请访问：http: //api.jquery.com/jQuery.ajaxSetup
回答by Sean W.
The jQuery documentation recommends doing something like the following:
jQuery 文档建议执行以下操作：
$( document ).ajaxStart(function() {
$( "#loading" ).show();
}).ajaxStop(function() {
$( "#loading" ).hide();
});
Where #loadingis the element with your busy indicator in it.
#loading带有忙碌指示符的元素在哪里。
References:
参考：
- http://api.jquery.com/ajaxStart/
In addition,
jQuery.ajaxSetupAPIexplicitly recommends avoidingjQuery.ajaxSetupfor these:Note: Global callback functions should be set with their respective global Ajax event handler methods—
.ajaxStart(),.ajaxStop(),.ajaxComplete(),.ajaxError(),.ajaxSuccess(),.ajaxSend()—rather than within theoptionsobject for$.ajaxSetup().
- http://api.jquery.com/ajaxStart/
此外，
jQuery.ajaxSetupAPI明确建议避免jQuery.ajaxSetup这些：注意：全局回调函数应该使用它们各自的全局 Ajax 事件处理程序方法——
.ajaxStart()、.ajaxStop()、.ajaxComplete()、.ajaxError()、.ajaxSuccess()、 ——.ajaxSend()而不是在optionsfor的对象中设置$.ajaxSetup()。
回答by Elliott
I tend to just show/hide a IMG as other have stated. I found a good website which generates "loading gifs"
我倾向于像其他人所说的那样显示/隐藏 IMG。我找到了一个很好的网站，可以生成“加载 gif”
LinkI just put it inside a divand hide by default display: none;(css) then when you call the function show the image, once its complete hide it again.
链接我只是将它放在 a 中div并默认隐藏display: none;（css）然后当您调用该函数时显示图像，一旦完成再次隐藏它。
回答by Chase Florell
yes, it's really just a matter of showing/hiding an animated gif.
是的，这实际上只是显示/隐藏动画 gif 的问题。
回答by kobe
I did it in my project ,
我在我的项目中做到了，
make a div with back ground url as gif , which is nothing but animation gif
使用背景 url 作为 gif 制作一个 div ，这只不过是动画 gif
<div class="busyindicatorClass"> </div>
.busyindicatorClass
{
background-url///give animation here
}
in your ajax call , add this class to the div and in ajax success remove the class.
在您的 ajax 调用中，将此类添加到 div 并在 ajax 成功中删除该类。
it will do the trick thatsit.
它会做的伎俩。
let me know if you need antthing else , i can give you more details
如果你需要其他东西，请告诉我，我可以给你更多细节
in the ajax success remove the class
在 ajax 成功中删除类
success: function(data) {
remove class using jquery
}
回答by John M
To extend Rodrigo's solution a little - for requests that are executed frequently, you may only want to display the loading image if the request takes more than a minimum time interval, otherwise the image will be continually popping up and quickly disappearing
稍微扩展 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
}
});
回答by albert yu
I did it in my project:
我在我的项目中做到了：
Global Events in application.js:
application.js 中的全局事件：
$(document).bind("ajaxSend", function(){
$("#loading").show();
}).bind("ajaxComplete", function(){
$("#loading").hide();
});
"loading" is the element to show and hide!
“加载”是显示和隐藏的元素！
References: http://api.jquery.com/Ajax_Events/
回答by Ken Mc
I had to use
我不得不使用
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();
});
回答by Sandeepraj Tandon
Old thread, but i wanted to update since i worked on this problem today, i didnt have jquery in my project so i did it the plain old javascript way, i also needed to block the content on the screen so in my xhtml
旧线程，但我想更新，因为我今天解决了这个问题，我的项目中没有 jquery，所以我用普通的旧 javascript 方式做了，我还需要在我的 xhtml 中阻止屏幕上的内容
<img id="loading" src="#{request.contextPath}/images/spinner.gif" style="display: none;"/>
in my javascript
在我的 javascript 中
document.getElementsByClassName('myclass').style.opacity = '0.7'
document.getElementById('loading').style.display = "block";
