jquery - 如何显示jQuery中的加载微调器？(How to show loading spinner in jQuery?)

Question

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 () {
    ...
}

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中一样将加载微调器附加到此命令？)

  ask by Edward Tanguay translate from so

Answer 1

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.

(每当您执行任何Ajax调用时，ajaxStart / Stop函数都会触发。)

Update : As of jQuery 1.8, the documentation states that .ajaxStart/Stop should only be attached to document .

(更新 ：从jQuery 1.8开始，文档指出.ajaxStart/Stop应该仅附加到document 。)

This would transform the above snippet to:

(这会将上面的代码段转换为：)

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