在IE7中不顯示jQuery Ajax微調器

我想在加載AJAX內容時顯示ajax微調器。在IE7中不顯示jQuery Ajax微調器

下面的代碼似乎在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必須是最後一個！

[編輯]

IE不與它開始於background:它錯誤和該行的其餘部分被不爲CSS

見執行支持RGBA，因此：Browser Support for RGBa

來源

2011-01-21 21:20:35 Gutzofter

可能是您的DOM元素的ž排序問題;

IE以不同於其他瀏覽器的方式處理對象的Z排序。嘗試在你的包裝元素上設置z-index，它應該有所幫助。一般來說，如果您想用相對或絕對定位來定位元素來爲您節省麻煩，那麼最好的做法是始終向父母提供適當的z-index;

讓實際的頁面調試會讓它更容易。

來源

2011-01-21 12:47:39

那不是我害怕的。我正在爲客戶端工作localy，因此發佈該頁面不是一種選擇。這將是很好的，並欣賞輸入:) – RyanP13 2011-01-21 13:00:00

它看起來像你IE瀏覽器不執行前置時，我檢查它的顯示功能它的長度它回來0。 – RyanP13 2011-01-21 13:03:53

嗯，瘋狂的猜測 - 嘗試添加縮放：1的包裝元素觸發hasLayout - 可能是這樣 - 或丟失hasLayout在DOM樹的某處更高 – 2011-01-21 13:05:33

JQuery實際上會在事件發生時觸發事件。

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

這將爲您節省大量的時間，爲每次單獨調用手動執行此操作。

您可以有一個DIV相對於文檔的頂部，您可以顯示/隱藏覆蓋頁面上的其他所有內容。（我忘了確切的CSS，使它始終距離屏幕頂端200px等）更新：我認爲這是位置：固定，雖然我不知道這將在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

爲了我的理智和今天完成這件事。

我已將「ajaxLoader」元素添加到標記中，最初用CSS隱藏，然後在AJAX啓動/停止時顯示/隱藏。

這適用於所有瀏覽器。

感謝所有的投入。

來源

2011-01-21 13:37:17 RyanP13

在IE7中不顯示jQuery Ajax微調器

回答

相關問題