プロトタイプでは、次のコードを使用して「読み込み中...」画像を表示できます。
var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars,
onLoading: showLoad, onComplete: showResponse} );
function showLoad () {
...
}
jQueryでは、次のようにしてサーバー ページを要素に読み込むことができます。
$('#message').load('index.php?pg=ajaxFlashcard');
しかし、Prototype で行ったように、このコマンドに読み込みスピナーをアタッチするにはどうすればよいでしょうか?
ベストアンサー1
方法はいくつかあります。私が好む方法は、要素自体の ajaxStart/Stop イベントに関数をアタッチすることです。
$('#loadingDiv')
.hide() // Hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
})
;
ajaxStart/Stop 関数は、Ajax 呼び出しを行うたびに実行されます。
更新.ajaxStart/Stop: jQuery 1.8 のドキュメントでは、は にのみ添付する必要があると記載されていますdocument。これにより、上記のスニペットは次のように変換されます。
var $loading = $('#loadingDiv').hide();
$(document)
.ajaxStart(function () {
$loading.show();
})
.ajaxStop(function () {
$loading.hide();
});