2

私は自分のウェブサイトの多くの部分に

$("#theDivToPopulate").load("/some/api/call.php", callBackToBindClickEventsToNewDiv);

/some/api/call.phpは、ビルドされたリスト、div、またはその他のHTML構造を返し、ターゲットdivに直接配置します。最近インターネットの動作が遅くなっており、ボタンのクリック（これらのAPI呼び出しを開始する）からdivの入力までの時間が数秒であることに気づきました。すべてのロード呼び出しをグローバルにラップして、API呼び出しが完了すると、呼び出しが行われる前に「Loading ...」を含むdivが表示され、非表示になるようにする簡単な方法はありますか？

一部のロードイベントには異なるコールバックがあるため、divを非表示にするコードをcallBackToBindClickEventsToNewDivに単純に配置することはできません。醜くて目的を果たさない各関数にコードをコピーする必要があります。.loadのフローを次のようにします。

 1) dispplayLoadingDiv()
 2) Execute API call
 3) Hide loading div
 4) do callback function.

コールバックには、新しくロードされたdivを適切に取り込むためのアニメーションが含まれているため、ロードするdivを最初に非表示にする必要があります。

編集：切り裂きジャックの答えを拡張する：

var ajaxFlag;
$(document).ajaxStart(function(){
    ajaxFlag = true;
    setTimeout(function (e) {
        if(ajaxFlag) {
            hideAllDivs();
            enableDivs(['loading']);
        }
    }, 500);

}).ajaxStop(function(){
    ajaxFlag = false;
    var load = $("#loading");
    load.css('visibility','hidden');
    load.css('display','none');
    load.data('isOn',false);
});

この方法では、ページの読み込みに500 MS以上かかる場合にのみ、読み込みが表示されます。私は、ロードが実際に高速で出入りするので、ページのロードが高速になると物事が途切れ途切れになることに気づきました。

4

2 に答える 2

3

次のjQueryを使用します。

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

#loaderAJAXリクエストが実行されているときに表示したいものを含むという要素がある場合。これは、テキスト、画像（gifなど）などのスパンである可能性があります。要素は最初にに設定する必要がありますdisplay: none

他の場所で関数を呼び出す必要はありません。

于 2012-07-31T14:05:32.523 に答える
1

これを試して

$("#someButtonId").click(function(e){
   e.preventDefault();
   $("#theDivToPopulate").html("Loading...");
   $.get("/some/api/call.php",function(data){
       $("#theDivToPopulate").fadeOut(100,function(){
           $("#theDivToPopulate").html(data).fadeIn(100,function(){
               //Do your last call back after showing the content
           });
      });
   });    
});
于 2012-07-31T14:05:17.733 に答える