jqueryのAjaxが

Question

を働いている私はjQueryのアヤックスを使用しています、私のコードは、私はアヤックスが働いている間に表示され、その後、時に消えますアニメーションGIFを追加する必要があり、この

$.get(
    'GetPage.aspx', 
    'url=' + url , 
    function (response) { 
     if (!cancelNavigationFlag) 
      setIframeHtml(response); 
     cancelNavigationFlag = false; 
    }, 
    'html' 
); 

のように見えながら、アニメーション画像を追加アヤックスは終了する。

どうすればいいですか？

Answer 1

私は異なるロジックと解決策を持っています。

<div id="loader">のようにGIF画像を表示する場所をdivに設定します。

次に、CSSで背景画像を設定し、画像リンクを次のように設定しないでください。

background: no-repeat center;

及びAJAXを実行するとき、それを背景画像loader.gifを与え、AJAXタスクが完了したとき、のようにそれを取り除きます。この情報がお役に立てば幸い、私はそれを自分でテストしていない

$.get(
    $("#loader").css({ 'background-image':'url(images/loader.gif)' }); 
    'GetPage.aspx', 
    'url=' + url , 
    function (response) { 
     if (!cancelNavigationFlag) 
      setIframeHtml(response); 
     cancelNavigationFlag = false; 
     $("#loader").css({ 'background-image':'url()' }); 
    }, 
    'html' 
); 

..

Answer 2

私は、通常、このような何か： "indicatordivは" ローダーのGIF画像を含む単純なdiv要素である

$("#indicatordiv").show(); 
$.post("somepage", function(result){ 
    $("#indicatordiv").hide(); 
}) 

を。

あなたのケースでは、get要求の前の要素を ".show（）"し、応答関数の中で ".hide（）"します。

Answer 3

イメージタグを含むdivをローダイメージに追加できます。最初にdivを非表示にします。 ajaxリクエストを呼び出す前にdivを表示してください。そして、ajaxリクエストからデータを取得した後、divを非表示にします。

$("#dvLoader").show(); 
$.get(
    'GetPage.aspx', 
    'url=' + url , 
    function (response) { 
     if (!cancelNavigationFlag) 
      setIframeHtml(response); 
     cancelNavigationFlag = false; 
    }, 
    'html' 
    success: 
     function(data) 
     { 
      $("#dvLoader").hide(); 
     } 

); 

dvLoaderはローダイメージが含まれています。