如何显示jQuery中的加载微调器?

本文介绍了如何显示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(); });