jQuery AJAXスピナーがIE7に表示されない

AJAXコンテンツを読み込むときにAJAXスピナーを表示しようとしています。jQuery AJAXスピナーがIE7に表示されない

次のコードはFirefoxではうまく動作しますが、IE7では正常に動作しないようです。スピナーの表示と非表示を切り替える機能が呼び出されていますが、ブラウザーはそれを表示しません。ここで

はjQueryのです：

 $.ajax({ 
      url: filterorSearch, 
      data: {filterParams: JSON.stringify(filters), requestTime: new Date().getTime()}, 
      beforeSend: function(){ 
       showLoadingGraphic(); 
      }, 
      complete: function(){ 
       hideLoadingGraphic(); 
      }, 
      success: function(data){ 
       $("#BreakingNews").html(data); 
       GetRelatedarticles();     
      } 
     }); 

    function showLoadingGraphic() { 
     alert("show"); 
     var showSpinner = $('#page-placeholder-wrapper #main-left').prepend('<div id="ajaxLoader"></div>'); 
     return showSpinner; 
    } 

    function hideLoadingGraphic() { 
     alert("hide"); 
     var hideSpinner = $('#ajaxLoader').remove(); 
     return hideSpinner; 
    }

スピナーのための関連するCSS：

#page-placeholder-wrapper #main-left 
{ 
    position:relative; 
    } 

#ajaxLoader 
{ 
    background:rgba(255,255,255,.7) url("../images/icon-ajax-loading.gif") no-repeat center center; 
    height:100%; 
    left:0; 
    position:absolute; 
    top:0; 
    width:100%; 
    z-index:9999; 
    }

出典

2011-01-21 RyanP13

は、あなたがこれを試す作業を取得するには：

background: url("../images/icon-ajax-loading.gif") no-repeat center center rgba(255,255,255,.7);

私にはわからないRGBAが最後である必要がありますなぜ！

[EDIT]

IEはそれがbackground:そのエラーに開始し、行の残りの部分は、CSS

見るために実行されないで、したがって、RGBAをサポートしていない：Browser Support for RGBa

出典

2011-01-21 21:20:35 Gutzofter

ありがとう、私は月曜日にそれを行こうと思います。 – RyanP13

あなたのDOM要素のZソートの問題である場合があります。

IEは、他のブラウザと少し違う方法でオブジェクトのZソートを処理します。ラッパー要素にz-indexを設定してみてください。一般的には、相対的または絶対的な配置で配置された要素を使用して問題を解決し、親に適切なZ-インデックスを常に与えたい場合は、ベストプラクティスです。

実際のページをデバッグすると簡単になります。

出典

2011-01-21 12:47:39

それは私が恐れているわけではありません。クライアントのために働いているので、ページを公開することは選択肢ではありません。それはいいと思います入力を感謝します:) – RyanP13

私はそれが0として戻ってくるショー機能でそれの長さをチェックするときにIEは前に実行されていないと思う。 – RyanP13

hmm、野生の推測 - wrapper要素にhasLayoutをトリガーするためにズーム：1を試してみる - これかもしれない - またはDOMツリーのどこかでhasLayoutが足りない –

JQueryは実際にはAjaxを実行しているときにイベントを発生させます。

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

これにより、個々の通話ごとに手動で行うよりも、時間を大幅に節約できます。

表示/非表示にできるドキュメントの上部に相対的なDIVを持つことができます。これは、ページ上の他のすべてをオーバーレイします。（私はそれが画面の上から常に200pxになるような正確なCSSを忘れています）アップデート：私はそれが位置だと思います。固定ですが、これはIEでうまくいくかどうかはわかりません。

<body> 
    <div id="ajaxIndicator" style="position:fixed; top:200px; text-align:center"> 
     <img src="../indicator.gif" /> Loading ... 
    </div> 

    ...

出典

2011-01-21 13:10:45 Derrick

出典：http://skfox.com/2008/04/28/jquery-example-ajax-activity-indicator/ – Derrick

これはうまくいきません。私は入力を感謝しますが、私はコード内のどこかで何か面白いことがなければならないと思います。 – RyanP13

これは今日のことです。

私はCSSで最初に隠されたマークアップに「ajaxLoader」の要素を加え、その後、AJAXの起動時/非表示を示している/停止します。

これはすべてのブラウザで問題なく動作します。

入力いただきありがとうございます。

出典

2011-01-21 13:37:17 RyanP13

jQuery AJAXスピナーがIE7に表示されない

答えて

関連する問題