jquery - 投稿からの応答を待っている間に読み込み中の画像を追加する

Question

jqueryで投稿のレスポンス待ち中に読み込み中の画像を追加したり、マウスカーソルを変更したりしたいです。

jquery

$.post(url,data,
    function(response){
    //add a loading cursor to indicate that it is waiting for a response?
    alert(response);
});

応答がポップアップするのに時間がかかりすぎるため、これが必要です。

何か案が？ありがとう

Answer 1

ajax 呼び出しの直前にカーソルを変更し、成功ハンドラーで元に戻します。

$('body').css('cursor','wait');

$.post(url,data, function(response){
    $('body').css('cursor','default');
});

$.ajax を使用する場合、さらにいくつかのオプションがあります。

$.ajax({
    url : url,
    data: data,
    type: 'POST',
    beforeSend: function() {
        $('body').css('cursor','wait');
    }
}).done(function(data) {
    // do something with data
}).fail(function() {
    console.log('error');
}).always(function() {
    $('body').css('cursor','default');
});

同じロジックが読み込み中の画像や追加することにしたものに適用されますか?

Answer 2

これは $.ajax() を使用したオプションです。DOM で非表示の loadingImage を定義する必要があります。

        $.ajax({                                                                                                           
            type:'POST',                                                                                                   
            ...                                                                                                           
            beforeSend:function(){                                                                                         
                $('.loadingImg').show();                                                                                
            },                                                                                                             
            complete:function(){                                                                                           
                $('.loadingImg').hide();                                                                    
            },                                                                                                             
            ...                                                                                                                                                         
        });