blocks|key|858194|text|您可以只显示/隐藏gif，但也可以将其嵌入到ajaxSetup中，以便在每次ajax请求时都会调用它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|858195|$.ajaxSetup({
++++beforeSend:function(){
++++++++//+show+gif+here,+eg:
++++++++$("#loading").show();
++++},
++++complete:function(){
++++++++//+hide+gif+here,+eg:
++++++++$("#loading").hide();
++++}
});|code-block|syntax|javascript|858196|需要注意的一点是，如果您想在不使用加载微调器的情况下执行特定的ajax请求，您可以这样做：|858197|$.ajax({
+++global:+false,
+++//+stuff
});|858198|这样，我们之前的$.ajaxSetup将不会影响使用global:+false的请求。|offset|length|style|CODE|858199|更多详情请访问：http://api.jquery.com/jQuery.ajaxSetup|858200|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/jQuery.ajaxSetup^0|0|0|0|0|Q|D|0|8|12|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|14|8|@$M|15|N|16|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|17|8|@]|9|@$M|18|N|19|1|1A]]|A|$]]|$1|S|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

You can just show / hide a gif, but you can also embed that to ajaxSetup, so it's called on every ajax request.

<pre><code>$.ajaxSetup({
 beforeSend:function(){
 // show gif here, eg:
 $("#loading").show();
 },
 complete:function(){
 // hide gif here, eg:
 $("#loading").hide();
 }
});
</code></pre>

One note is that if you want to do an specific ajax request without having the loading spinner, you can do it like this:

<pre><code>$.ajax({
 global: false,
 // stuff
});
</code></pre>

That way the previous $.ajaxSetup we did will not affect the request with <code>global: false</code>.

More details available at: <a href="http://api.jquery.com/jQuery.ajaxSetup">http://api.jquery.com/jQuery.ajaxSetup</a>

blocks|key|1072808|text|我倾向于像其他人所说的那样只显示/隐藏一个IMG。我找到一个很好的网站，可以生成“加载gif”。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1072809|我只是把它放在一个div里面，然后在默认情况下隐藏display:+none;+(css)，然后当你调用这个函数显示图像时，一旦它完成了，就再次隐藏它。|offset|length|style|CODE|1072810|entityMap^0|0|9|3|P|E|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]|$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|I|$]]

I tend to just show/hide a IMG as other have stated. I found a good website which generates "loading gifs"

<a href="http://www.ajaxload.info/" rel="noreferrer">Link</a>
I just put it inside a <code>div</code> and hide by default <code>display: none;</code> (css) then when you call the function show the image, once its complete hide it again.

blocks|key|858050|text|是的，这只是一个显示/隐藏动画gif的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|858051|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

yes, it's really just a matter of showing/hiding an animated gif.

blocks|key|858128|text|我在我的项目中做到了，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|858129|创建一个带有背景url作为gif的div，它只是一个动画gif。|858130|<div+class="busyindicatorClass">+</div>

.busyindicatorClass
{
background-url///give+animation+here
}|code-block|syntax|javascript|858131|在ajax调用中，将此类添加到div中，并在ajax成功时删除该类。|858132|它将会起到它的作用。|858133|如果你还需要别的什么，请告诉我，我可以给你更多细节。|858134|在ajax成功中删除类|858135|success:+function(data)+{
++++remove+class+using+jquery
++}|858136|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|11|8|@]|9|@]|A|$G|H]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

I did it in my project ,

make a div with back ground url as gif , which is nothing but animation gif

<pre><code>&lt;div class="busyindicatorClass"&gt; &lt;/div&gt;

.busyindicatorClass
{
background-url///give animation here
}
</code></pre>

in your ajax call , add this class to the div and in ajax success remove the class.

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

<pre><code>success: function(data) {
 remove class using jquery
 }
</code></pre>

blocks|key|858428|text|稍微扩展一下Rodrigo的解决方案-对于频繁执行的请求，您可能只希望在请求花费的时间超过最小时间间隔时才显示加载图像，否则图像将不断弹出并迅速消失|type|unstyled|depth|inlineStyleRanges|entityRanges|data|858429|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
++++}
});|code-block|syntax|javascript|858430|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>var loading = false;

$.ajaxSetup({
 beforeSend: function () {
 // Display loading icon if AJAX call takes &gt;1 second
 loading = true;
 setTimeout(function () {
 if (loading) {
 // show loading image
 }
 }, 1000); 
 },
 complete: function () {
 loading = false;
 // hide loading image
 }
});
</code></pre>

blocks|key|858273|text|我在我的项目中做到了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|858274|Application.js中的全局事件：|858275|$(document).bind("ajaxSend",+function(){
+++$("#loading").show();
+}).bind("ajaxComplete",+function(){
+++$("#loading").hide();
+});|code-block|syntax|javascript|858276|"loading“是要显示和隐藏的元素！|858277|参考资料：http://api.jquery.com/Ajax_Events/|offset|length|858278|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/Ajax_Events/^0|0|0|0|0|5|Y|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

I did it in my project:

Global Events
in application.js:

<pre><code>$(document).bind("ajaxSend", function(){
 $("#loading").show();
 }).bind("ajaxComplete", function(){
 $("#loading").hide();
 });
</code></pre>

"loading" is the element to show and hide!

References:
<a href="http://api.jquery.com/Ajax_Events/" rel="nofollow">http://api.jquery.com/Ajax_Events/</a>

blocks|key|1072847|text|我不得不用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1072848|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();
++});|code-block|syntax|javascript|1072849|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I had to use

<pre><code>HTML:
 &lt;img id="loading" src="~/Images/spinner.gif" alt="Updating ..." style="display: none;" /&gt;

In script file:
 // invoked when sending ajax request
 $(document).ajaxSend(function () {
 $("#loading").show();
 });

 // invoked when sending ajax completed
 $(document).ajaxComplete(function () {
 $("#loading").hide();
 });
</code></pre>

blocks|key|1072884|text|旧线程，但我想要更新，因为我今天解决了这个问题，我的项目中没有jquery，所以我用普通的旧javascript方式做了，我还需要阻止屏幕上的内容，所以在我的xhtml中|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1072885|++++<img+id="loading"+src="#{request.contextPath}/images/spinner.gif"+style="display:+none;"/>|code-block|syntax|javascript|1072886|在我的javascript中|1072887|++++document.getElementsByClassName('myclass').style.opacity+=+'0.7'
++++document.getElementById('loading').style.display+=+"block";|1072888|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

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

<pre><code> &lt;img id="loading" src="#{request.contextPath}/images/spinner.gif" style="display: none;"/&gt;
</code></pre>

in my javascript

<pre><code> document.getElementsByClassName('myclass').style.opacity = '0.7'
 document.getElementById('loading').style.display = "block";
</code></pre>

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.

Is it really just a matter of showing/hiding an animated gif, or is there a more elegant solution?

How to display a "busy" indicator with jQuery?

如何在网页中的特定位置显示旋转的“忙”指示器？我希望在Ajax请求开始/完成时启动/停止指示器。这真的只是一个显示/隐藏动画gif的问题，还是有一个更优雅的解决方案？

问如何在jQuery中显示“忙”指示器？
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在jQuery中显示“忙”指示器？EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在jQuery中显示“忙”指示器？
EN