2012-02-13 105 views
0

我有以下HTML:某些HTML不想在IE中顯示/隱藏。爲什麼?

<div id="loading-overlay"> 
    <div id="loading-overlay-background"></div> 
    <div id="loading-overlay-content"> 
     Processing... 
     <br /> 
     <img src="@Url.Content("~/Content/img/ajax-loader.gif")" title="" alt="Please Wait" /> 
    </div> 
</div> 

而CSS:

#loading-overlay 
{ 
    position:fixed; 
    width:100%; 
    height:100%; 
    top:0; 
    left:0; 
    z-index:5000; 
} 
#loading-overlay-background 
{ 
    position:relative; 
    width:100%; 
    height:100%; 
    top:0; 
    left:0; 
    background-color:#000; 
    opacity:0.5; 
    filter:alpha(opacity=50); 
    z-index:5001; 
} 
#loading-overlay-content 
{ 
    position:fixed; 
    top:25%; 
    left:50%; 
    margin-left:-150px; 
    margin-top:-20px; 
    height:40px; 
    width:300px; 
    color:#fff; 
    text-align:center; 
    z-index:15002; 
} 

這裏是一些JavaScript(jQuery的):

$.ajax({ 
       url: 'controller/action', 
       beforeSend: function() { 
        $('#loading-overlay').show(); 
       }, 
       success: function (data, textStatus, jqXHR) { 
       }, 
       error: function (xhr) { 
       }, 
       complete: function() { 
        $('#loading-overlay').hide(); 
       } 
      }); 

爲什麼不是我的「加載覆蓋「在任何AJAX調用中出現在任何版本的IE中?

編輯:是的,它在FireFox和Chrome中很好用。這些AJAX調用可能需要幾分之一秒到20秒左右才能完成。警報消息確實顯示,但HTML不顯示。

+0

AJAX調用需要多快才能完成?如果它們足夠快,'#loading-overlay'元素將顯示然後再次隱藏並且可能不明顯。 – 2012-02-13 15:43:58

+0

它適用於其他瀏覽器? – Christoph 2012-02-13 15:44:24

+0

我會說ajax正在快速完成。在show()調用之後放一個提示,看看它是否顯示 – Henesnarfel 2012-02-13 15:44:47

回答

1

嘗試這樣的事情,

beforeSend: function() { 
    $('#loading-overlay').show(1); 
}, 

complete: function() { 
    $('#loading-overlay').delay(500).hide(250); 
} 

看到它在行動,here ..

編輯:

你也可以嘗試減少的動畫幀速率。

使用jQuery.fx.interval = 50;

默認情況下,它被設置爲13毫秒。使用.fadeIn()可以減少CPU資源的負擔。但建議謹慎調整這一點。閱讀更多here

+0

看起來好像會出現,但我需要到辦公室看清楚它的行動。現在去辦公室。 – Dimskiy 2012-02-13 17:22:56

+0

好的。即將到來,但它看起來像beforeSend中的.show(),當它已經在成功執行JS時觸發。 – Dimskiy 2012-02-13 18:11:49

+0

我根據這個答案做了一些工作。總之,我重寫了一些成功的代碼,以加快處理時間並將.hide()更改爲.fadeIn(200)。有一些關於動畫與純CSS改變(.show())有關IE處理不同的內容。這仍然不理想,但業務除外。現在繼續,未來可能會回到這個問題。謝謝! – Dimskiy 2012-02-13 22:33:25

-2

因爲你完全隱藏它。

它在成功/錯誤回調後被調用。

+0

它應該顯示在發送ajax之前,然後它隱藏在ajax完成後 – Henesnarfel 2012-02-13 15:45:44

+0

是啊,他隱藏它,因爲他在beforeSend中顯示它。 – 2012-02-13 15:46:55

+0

我錯了,沒有讀得夠好 – 2012-02-13 15:47:08

0

感謝大家,我只是非常困惑,因爲我的覆蓋顯示在所有的瀏覽器中,除了IE瀏覽器,現在這對所有的瀏覽器都很好,我已經將它們集成到一個jsf頁面中,並且它很好。

相關問題