jquery - 如何在 jQuery 中显示加载微调器？

Question

在 Prototype 中，我可以使用以下代码显示“正在加载...”图像:

var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, 
onLoading: showLoad, onComplete: showResponse} );

function showLoad () {
    ...
}

在 jQuery 中，我可以将服务器页面加载到一个元素中:

$('#message').load('index.php?pg=ajaxFlashcard');

但我如何像在 Prototype 中那样将加载微调器附加到此命令？

Answer 1

有几种方法。我的首选方法是将函数附加到元素本身的 ajaxStart/Stop 事件。

$('#loadingDiv')
    .hide()  // Hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

ajaxStart/Stop 函数将在您执行任何 Ajax 调用时触发。

更新:从 jQuery 1.8 开始，文档指出 .ajaxStart/Stop 应该只附加到 document。这会将上面的代码片段转换为:

var $loading = $('#loadingDiv').hide();
$(document)
  .ajaxStart(function () {
    $loading.show();
  })
  .ajaxStop(function () {
    $loading.hide();
  });