2009-12-16 56 views
0

我遇到了一個晦澀難懂的問題,我公司網站上的許多頁面需要幾秒鐘才能加載幾分鐘。通常,人們會希望瀏覽器的本機進度條繼續旋轉,直到所有未完成的請求都完成爲止,但是當ANY請求返回時,IE將停止進度條。是的,這必須與IE一起工作。我們的網站有一些JavaScript(jQuery),當另一個元素被鼠標懸停時,它會更改DOM元素的背景圖像,這會導致IE發送請求,從而中斷現有的進度條。事件IE瀏覽器 - JavaScript更改IMG SRC取消現有的加載欄

精確序列:長加載時間

  1. 點擊鏈接(進度條正確旋轉)

  2. 將鼠標移動的頁面,等待,無意中觸發圖像變化(進度條停止)

  3. 客戶抱怨說,頁面停止加載的

那麼,有什麼想法?我認爲的一種方法是將鼠標光標更改爲等待鏈接被按下時的等待,並且如果按下瀏覽器的停止按鈕將光標改回到正常光標。但是,如果用戶按下停止按鈕似乎不太容易檢測到。 。 。我能想到的唯一的另一個選擇是阻止背景圖像在鏈接被點擊後發生改變,但這是一種非常蹩腳的方法。

感謝您的幫助:)

+0

,我相信我有一個類似的問題,但從來沒有真正想出一個完全令人滿意的解決方案...一個影響IE瀏覽器背景圖像的東西確實浮現在腦海中。讓我查看它,然後我將添加另一條評論或回答 – 2009-12-16 23:40:44

+0

好吧,它可能是這個閃爍問題的變體嗎? http://stackoverflow.com/questions/1810828/css-sprite-based-rollover-blinks-in-ie6 – 2009-12-16 23:56:36

+0

還有一件事,如果你有閃光燈參與,這個問題一直打我的時候: HTTP:/ /groups.google.com/group/Google-Maps-API/browse_thread/thread/b04520771d7c7698 – 2009-12-16 23:59:49

回答

1

一種方法是將您的圖像從徘徊到$(document).ready$(document).load

一個更好的解決方案是使用精靈爲你的形象有開啓和關閉狀態徘徊,所以你不需要改變圖像源。下面是使用jQuery來處理精靈的一個簡單的例子:

CSS(假定爲100×200,每個狀態100x100的圖像)

.my-image { height: 100px; width: 100px; background: transparent url('/path/to/img.jpg') 0 0 no-repeat; overflow: hidden; } 
.my-image-hover { background-position: 0 -100px !important; } 

jQuery的

// add class hover to image 
$('.my-image').hover(function() { 
    $(this).addClass('my-image-hover'); 
}, function() { 
    $(this).removeClass('my-image-hover'); 
}); 
+0

是的。 。 。我有點喜歡在個人形象中擁有它,但我認爲你最終會變得正確。當然,這是一個很好的解決方案。我會給它一個旋風。 – 2009-12-16 23:17:56

+0

我不知道爲什麼我做了你使用jQuery的假設。我的錯。 – 2009-12-16 23:19:28

+0

因爲我說我在問題:) – 2009-12-16 23:20:51