如何在 jQuery 中显示加载微调器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/68485/
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 show loading spinner in jQuery?
提问by Edward Tanguay
In PrototypeI can show a "loading..." image with this code:
在Prototype 中，我可以使用以下代码显示“正在加载...”图像：
var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars,
onLoading: showLoad, onComplete: showResponse} );
function showLoad () {
...
}
In jQuery, I can load a server page into an element with this:
在jQuery 中，我可以使用以下内容将服务器页面加载到元素中：
$('#message').load('index.php?pg=ajaxFlashcard');
but how do I attach a loading spinner to this command as I did in Prototype?
但是如何像在 Prototype 中那样将加载微调器附加到此命令？
回答by nickf
There are a couple of ways. My preferred way is to attach a function to the ajaxStart/Stop events on the element itself.
有几种方法。我的首选方法是将函数附加到元素本身的 ajaxStart/Stop 事件。
$('#loadingDiv')
.hide() // Hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
})
;
The ajaxStart/Stop functions will fire whenever you do any Ajax calls.
ajaxStart/Stop 函数将在您执行任何 Ajax 调用时触发。
Update: As of jQuery 1.8, the documentation states that .ajaxStart/Stopshould only be attached to document. This would transform the above snippet to:
更新：从 jQuery 1.8 开始，文档指出.ajaxStart/Stop应该只附加到document. 这会将上述代码段转换为：
var $loading = $('#loadingDiv').hide();
$(document)
.ajaxStart(function () {
$loading.show();
})
.ajaxStop(function () {
$loading.hide();
});
回答by kr00lix
For jQuery I use
对于 jQuery 我使用
jQuery.ajaxSetup({
beforeSend: function() {
$('#loader').show();
},
complete: function(){
$('#loader').hide();
},
success: function() {}
});
回答by Seeker
You can just use the jQuery's .ajaxfunction and use its option beforeSendand define some function in which you can show something like a loader div and on success option you can hide that loader div.
您可以只使用 jQuery 的.ajax函数并使用其选项beforeSend并定义一些函数，您可以在其中显示诸如加载程序 div 之类的内容，并且在成功选项中您可以隐藏该加载程序 div。
jQuery.ajax({
type: "POST",
url: 'YOU_URL_TO_WHICH_DATA_SEND',
data:'YOUR_DATA_TO_SEND',
beforeSend: function() {
$("#loaderDiv").show();
},
success: function(data) {
$("#loaderDiv").hide();
}
});
You can have any Spinning Gif image. Here is a website that is a great AJAX Loader Generator according to your color scheme: http://ajaxload.info/
您可以拥有任何 Spinning Gif 图像。这是一个网站，根据您的配色方案，它是一个很棒的 AJAX 加载程序生成器：http: //ajaxload.info/
回答by Josh Stodola
You can insert the animated image into the DOM right before the AJAX call, and do an inline function to remove it...
您可以在 AJAX 调用之前将动画图像插入到 DOM 中，并执行内联函数将其删除...
$("#myDiv").html('<img src="images/spinner.gif" alt="Wait" />');
$('#message').load('index.php?pg=ajaxFlashcard', null, function() {
$("#myDiv").html('');
});
This will make sure your animation starts at the same frame on subsequent requests (if that matters). Note that old versions of IE mighthave difficulties with the animation.
这将确保您的动画在后续请求的同一帧开始（如果这很重要）。请注意，旧版本的 IE可能在动画方面存在困难。
Good luck!
祝你好运！
回答by Brent
$('#message').load('index.php?pg=ajaxFlashcard', null, showResponse);
showLoad();
function showResponse() {
hideLoad();
...
}
回答by Amin Saqi
If you are using $.ajax()you can use somthing like this:
如果你正在使用$.ajax()你可以使用这样的东西：
$.ajax({
url: "destination url",
success: sdialog,
error: edialog,
// shows the loader element before sending.
beforeSend: function () { $("#imgSpinner1").show(); },
// hides the loader after completion of request, whether successfull or failor.
complete: function () { $("#imgSpinner1").hide(); },
type: 'POST', dataType: 'json'
});
回答by Nathan Bubna
Use the loading plugin: http://plugins.jquery.com/project/loading
使用加载插件：http: //plugins.jquery.com/project/loading
$.loading.onAjax({img:'loading.gif'});
回答by Emil Stenstr?m
I ended up with two changes to the original reply.
我最终对原始回复进行了两次更改。
- As of jQuery 1.8, ajaxStart and ajaxStop should only be attached to
document. This makes it harder to filter only a some of the ajax requests. Soo... - Switching to ajaxSendand ajaxCompletemakes it possible to interspect the current ajax request before showing the spinner.
- 从 jQuery 1.8 开始，ajaxStart 和 ajaxStop 应该只附加到
document. 这使得仅过滤一些 ajax 请求变得更加困难。苏... - 切换到ajaxSend和ajaxComplete可以在显示微调器之前检查当前的 ajax 请求。
This is the code after these changes:
这是这些更改后的代码：
$(document)
.hide() // hide it initially
.ajaxSend(function(event, jqxhr, settings) {
if (settings.url !== "ajax/request.php") return;
$(".spinner").show();
})
.ajaxComplete(function(event, jqxhr, settings) {
if (settings.url !== "ajax/request.php") return;
$(".spinner").hide();
})
回答by Paul
Variant: I have an icon with id="logo" at the top left of the main page; a spinner gif is then overlaid on top (with transparency) when ajax is working.
变体：我在主页的左上角有一个带有 id="logo" 的图标；当 ajax 工作时，一个微调 gif 然后覆盖在顶部（具有透明度）。
jQuery.ajaxSetup({
beforeSend: function() {
$('#logo').css('background', 'url(images/ajax-loader.gif) no-repeat')
},
complete: function(){
$('#logo').css('background', 'none')
},
success: function() {}
});
回答by Umesh kumar
You can simply assign a loader image to the same tag on which you later will load content using an Ajax call:
您可以简单地将加载程序图像分配给稍后将使用 Ajax 调用加载内容的同一标签：
$("#message").html('<span>Loading...</span>');
$('#message').load('index.php?pg=ajaxFlashcard');
You can also replace the span tag with an image tag.
您还可以用图像标签替换 span 标签。
