<img>閃爍時，在Firefox

我拍圖，當你在列表中把鼠標懸停在某個名稱的地圖<img>改變src屬性的地圖圖像與區聚焦SRC變化，我只用了.attr() jquery的方法可以像這樣改變它。<img>閃爍時，在Firefox

$("img.map").attr("src","newmap.png");

它在所有的瀏覽器，但火狐的偉大工程，在圖像的變化，首先是舊的消失，再有就是當出現顯示任何內容，然後出現的新形象很短的時間，我怎麼能順利地做到這一點的變化在像Chrome或IE瀏覽器的Firefox呢？
（時間確實短暫，但當鼠標移動到目錄時，圖像在鼠標移動的整個過程中消失）。
或者您可能知道一個更好的方法來達到這個效果。謝謝

來源

2012-07-19 Mark E

爲此，請使用[css背景精靈]（http://css-tricks.com/css-sprites/）。沒有預加載或JavaScript（反正懸停），他們工作得很好。 – Esailija 2012-07-19 17:45:11

嘗試預先加載圖像。當瀏覽器正在加載新圖像時，會發生閃爍。

來源

2012-07-19 17:43:45 Lowkase

這個修好了！謝謝 – 2012-07-20 22:07:05

問題是，當您第一次引用它時，瀏覽器正在下載圖像，而不是之前。

我只是有兩個圖像元素，並隱藏/顯示它們而不是更改單個元素的src屬性。

來源

2012-07-19 17:43:52 Brad

發生這種情況是因爲src屬性發生了明顯變化。那麼，新的圖像還沒有下載。所以它必須發送一個請求到服務器，並等待所有的響應，而src屬性已經改變。這就是爲什麼你在這裏看不到任何東西。有辦法解決這個問題。在JavaScript中，使用新圖像創建一個新的圖像元素作爲源代碼。添加onload事件處理程序，該處理程序將更改您想要顯示的真實圖像的src屬性。是的，這可能會有點難以預加載，但它會減少初始頁面加載時間和它不會混亂你的HTML。

來源

2012-07-19 17:45:14

關閉我的頭頂部的懸停意圖和背景圖像的組合將有助於這一點。

懸停意圖很好，因爲您不想不必要地下載圖像。

如果您將包含div（或甚至圖像本身）的原始或上次查看圖像的背景圖像放在閃爍效果將會減少。我懷疑這些圖像更改的加載時間可能會有所不同，因此您可以使用它作爲顯示某種加載圖標的機會。

說了這麼多，我認爲讓原始圖像變得更有意義，並且每次你將一個區域懸停時都要添加一個新圖像。這樣，你只能添加圖像元素時，它不存在（保存http請求），甚至做更多優雅的變化（例如原始淡出）

希望幫助！

來源

2012-07-19 17:47:30 lnrbob

<img>閃爍時，在Firefox

回答

相關問題