0

私は現在、次のコードでajax呼び出しにプリローダーgifを使用しています：

$(document).ajaxStart(function () {
    var position = $('#parentDiv').position();
    position.left += (($('#parentDiv').width() / 2) - ($('#bigPreloader').width() / 2));
    position.top += (($('#parentDiv').height() / 2) - ($('#bigPreloader').height() / 2));
    $('#bigPreloader').css(position).show();
    $('#bigPreloader').show();
}).ajaxStop(function () {
    $('#bigPreloader').hide();
});

上記のコードでは、＃parentDivがページの大部分を占めており、プリローダーは250x250ピクセルで、＃parentDivの中央に配置されています。

これは正常に機能しますが、ページ全体ではなく、特定の入力に関連付けられたajax呼び出しをいくつか追加しました。私は小さなプリローダー（14x14ピクセル）を持っており、それを適切な入力自体の中に入れる予定です。

ajaxStart内で、どのajax呼び出しが行われたかを判別する方法はありますか？または、複数のajaxStartを特定の要素にリンクさせる方法はありますか？

解決

$(document).ajaxSend(function (event, jqxhr, settings) {
    if (settings.url.indexOf('LoadInputData') == -1) {
        var position = $('#parentDiv').position();
        position.left += (($('#parentDiv').width() / 2) - ($('#bigPreloader').width() / 2));
        position.top += (($('#parentDiv').height() / 2) - ($('#bigPreloader').height() / 2));
        $('#bigPreloader').css(position).show();
        $('#bigPreloader').show();
    } else {
        $('#inputLoad').removeClass('notActive').addClass('isActive');
    }
}).ajaxStop(function () {
    if ($('#bigPreloader').is(':visible')) {
        $('#bigPreloader').hide();
    } else {
        $('#inputLoad').removeClass('isActive').addClass('notActive');
    }
});
4

1 に答える 1

0

.ajaxStart（）は、他のすべての呼び出しが終了した場合にのみ起動します。進行中のリクエストがない場合は、ajaxStartでコードを起動します。したがって、非同期リクエストを使用している場合、以前のすべてのリクエストの実行が終了した場合を除いて、このメソッドはあまり役に立ちません。

あなたの質問を解決するために、代わりに.ajaxSend（）メソッドを使用することをお勧めします。このメソッドは、リクエストが送信される直前に毎回起動します。したがって、.ajaxStart（）とほぼ同じことを行います。リクエストを区別するために、ハンドラー関数に渡されたパラメーターを使用できます。テストできるものはいくつかありますが、次のようにURLを検索するのがおそらく最も簡単です。

jQueryドキュメントの例：

$(document).ajaxSend(function(event, jqxhr, settings) {
    if ( settings.url == "ajax/test.html" ) { //Test by URL
        //Do your specific pre-loader stuff here
    }
});

特定のリクエストでコンテキストを設定することもできます。これを行うと、$(this)セレクターが指定したコンテキストに設定されるため、ロジックをDOMから分離することもできます。このようにして、ローダーを設定した単一の関数を作成できます。この関数は、コンテキストで設定した要素に投稿されます。

$.ajax({
    url: "test.html",
    context: document.body
}).done(function() {
    $(this).addClass("done"); //$(this) is the document.body or could be the element you want to put your specific loader in.
});
于 2013-02-21T15:33:28.700 に答える