[解決済み] jQueryでloading spinnerを表示するには？

質問

で プロトタイプ このコードで、"loading..."の画像を表示させることができますね。

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

function showLoad () {
    ...
}

で jQuery で、サーバーのページを要素に読み込むことができるんだ。

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

しかし、Prototypeでやったように、このコマンドにローディングスピナーを付けるにはどうしたらいいのでしょうか？

解決方法は？

いくつかの方法があります。私が推奨する方法は、要素自体の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();
  });