[英]How to display a “busy” indicator with jQuery?
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动画的问题,还是有更优雅的解决方案?
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
The jQuery documentation recommends doing something like the following: jQuery文档建议执行以下操作:
$( document ).ajaxStart(function() {
$( "#loading" ).show();
}).ajaxStop(function() {
$( "#loading" ).hide();
});
Where #loading
is the element with your busy indicator in it. 其中
#loading
是包含忙碌指示符的元素。
References: 参考文献:
http://api.jquery.com/ajaxStop/ http://api.jquery.com/ajaxStop/
In addition, jQuery.ajaxSetup
API explicitly recommends avoiding jQuery.ajaxSetup
for these: 另外,
jQuery.ajaxSetup
API明确建议避免使用jQuery.ajaxSetup
:
Note: Global callback functions should be set with their respective global Ajax event handler methods—
.ajaxStart()
,.ajaxStop()
,.ajaxComplete()
,.ajaxError()
,.ajaxSuccess()
,.ajaxSend()
—rather than within theoptions
object for$.ajaxSetup()
.注意:应使用各自的全局Ajax事件处理程序方法设置全局回调函数 -
.ajaxStart()
.ajaxStop()
.ajaxComplete()
.ajaxError()
.ajaxSuccess()
.ajaxSend()
而不是内部$.ajaxSetup()
的options
对象。
I tend to just show/hide a IMG as other have stated. 我倾向于像其他人所说的那样显示/隐藏IMG。 I found a good website which generates "loading gifs"
我找到了一个很好的网站,生成“加载GIF”
Link I just put it inside a div
and hide by default display: none;
链接我只是把它放在一个
div
并默认隐藏display: none;
(css) then when you call the function show the image, once its complete hide it again. (css)然后当你调用函数显示图像时,一旦它完全隐藏它。
是的,这只是显示/隐藏GIF动画的问题。
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 为了扩展罗德里戈的解决方案 - 对于频繁执行的请求,如果请求超过最小时间间隔,您可能只想显示加载图像,否则图像将不断弹出并快速消失
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
}
});
I did it in my project , 我在我的项目中做到了
make a div with back ground url as gif , which is nothing but animation gif 用背景地址网址制作一个div作为gif,这只不过是动画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
}
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! “loading”是显示和隐藏的元素!
References: http://api.jquery.com/Ajax_Events/ 参考文献: http : //api.jquery.com/Ajax_Events/
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();
});
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";
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.