50

ajax ステータスに応じてプログレス バーを表示または非表示にするサイトのドキュメントにいくつかの ajax 呼び出しがあります。

  $(document).ajaxStart(function(){ 
        $('#ajaxProgress').show(); 
    });
  $(document).ajaxStop(function(){ 
        $('#ajaxProgress').hide(); 
    });

基本的に、サイトの他の部分でこれらのメソッドを上書きしたいと思います。そこでは、多くの迅速な小さな ajax 呼び出しが行われ、プログレス バーが飛び出したり外れたりする必要はありません。それらを他の $.getJSON および $.ajax 呼び出しに添付または挿入しようとしています。私はそれらを連鎖させようとしましたが、明らかにそれは良くありません。

$.getJSON().ajaxStart(function(){ 'kill preloader'});
4

10 に答える 10

40

2018 注:この回答は廃止されました。機能するこの回答の編集を自由に提案してください。

カスタム名前空間を使用して ajaxStart と ajaxStop をバインドできます。

$(document).bind("ajaxStart.mine", function() {
    $('#ajaxProgress').show();
});

$(document).bind("ajaxStop.mine", function() {
    $('#ajaxProgress').hide();
});

次に、サイトの他の部分で、.json 呼び出しの前に一時的にバインドを解除します。

$(document).unbind(".mine");

答えを探しているときに、ここからアイデアを得ました。

編集：残念ながら、テストする時間がありませんでした。

于 2009-07-31T14:06:14.677 に答える
15

これを ajax アクションを処理する関数に入れると、適切な場合にのみバインドされます。

$('#yourDiv')
    .ajaxStart(function(){
        $("ResultsDiv").hide();
        $(this).show();
    })
    .ajaxStop(function(){
        $(this).hide();
        $(this).unbind("ajaxStart");
    });
于 2010-12-02T19:05:57.700 に答える
7

さらに、との呼び出しを無効にしたい場合は、リクエストでオプションをに設定できます;).ajaxStart().ajaxStop()globalfalse.ajax()

ここで詳細を参照してください:特定の ajax 呼び出しで .ajaxStart() を呼び出す方法

于 2012-12-19T14:05:50.043 に答える
4

残念ながら、ajaxStart イベントには、アニメーションを表示するかどうかを決定するために使用できる追加情報はありません。

とにかく、ここに1つのアイデアがあります。ajaxStart メソッドで、たとえば 200 ミリ秒後にアニメーションを開始してみませんか? ajax リクエストが 200 ミリ秒で完了する場合、アニメーションは表示されません。それ以外の場合は、アニメーションが表示されます。コードは次のようになります。

var animationController = function animationController()
{
    var timeout = null;
    var delayBy = 200; //Number of milliseconds to wait before ajax animation starts.

    var pub = {};

    var actualAnimationStart = function actualAnimationStart()
    {
        $('#ajaxProgress').show();
    };

    var actualAnimationStop = function actualAnimationStop()
    {
        $('#ajaxProgress').hide();
    };

    pub.startAnimation = function animationController$startAnimation() 
    { 
        timeout = setTimeout(actualAnimationStart, delayBy);
    };

    pub.stopAnimation = function animationController$stopAnimation()
    {
        //If ajax call finishes before the timeout occurs, we wouldn't have 
        //shown any animation.
        clearTimeout(timeout);
        actualAnimationStop();
    }

    return pub;
}();


$(document).ready(
    function()
    {
        $(document).ajaxStart(animationController.startAnimation);
        $(document).ajaxStop(animationController.stopAnimation);
    }
 );
于 2009-07-28T01:46:12.340 に答える
2

解決策があります。showloader というグローバル js 変数を設定します (デフォルトでは false に設定されています)。ローダーを表示したい関数のいずれかで、ajax 呼び出しを行う前にそれを true に設定するだけです。

function doAjaxThing()
{
    showloader=true;
    $.ajax({yaddayadda});
}

次に、head セクションに次のように記述します。

$(document).ajaxStart(function()
{
    if (showloader)
    {
        $('.loadingholder').fadeIn(200);
    }
});    

$(document).ajaxComplete(function() 
{
    $('.loadingholder').fadeOut(200);
    showloader=false;
});
于 2014-03-21T04:14:25.450 に答える
0

何をすべきかを決定する前にリクエストを調べたい場合は、ajaxSend と ajaxComplete を使用してください。ここで私の返信を参照してください: https://stackoverflow.com/a/15763341/117268

于 2013-04-02T11:53:53.633 に答える