如何显示jQuery中的加载微调器? [英] How to show loading spinner in jQuery?
问题描述
在 Prototype 中,我可以使用以下代码显示正在加载..."图像:
In Prototype I can show a "loading..." image with this code:
var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars,
onLoading: showLoad, onComplete: showResponse} );
function showLoad () {
...
}
在 jQuery 中,我可以使用以下命令将服务器页面加载到元素中:
In jQuery, I can load a server page into an element with this:
$('#message').load('index.php?pg=ajaxFlashcard');
但是如何像在Prototype中一样将加载微调器附加到此命令上?
but how do I attach a loading spinner to this command as I did in Prototype?
推荐答案
有两种方法.我的首选方式是将一个函数附加到元素本身上的ajaxStart/Stop事件.
There are a couple of ways. My preferred way is to attach a function to the ajaxStart/Stop events on the element itself.
$('#loadingDiv')
.hide() // Hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
})
;
无论何时执行任何Ajax调用,ajaxStart/Stop函数都会触发.
The ajaxStart/Stop functions will fire whenever you do any Ajax calls.
更新:从jQuery 1.8开始,文档指出.ajaxStart/Stop
仅应附加到document
.这会将上面的代码段转换为:
Update: As of jQuery 1.8, the documentation states that .ajaxStart/Stop
should only be attached to document
. This would transform the above snippet to:
var $loading = $('#loadingDiv').hide();
$(document)
.ajaxStart(function () {
$loading.show();
})
.ajaxStop(function () {
$loading.hide();
});
这篇关于如何显示jQuery中的加载微调器?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!