我在網頁上有一張圖片,當用戶將鼠標懸停在圖片上時,會出現另一張圖片。當它在顯示的圖像上懸停時,它會閃爍。鼠標懸停元素閃爍
任何人都知道這是爲什麼?
託尼
UPDATE:徘徊時,第一個圖像不dissapear,只是另(較小)的圖像將會出現在左上角的頂部。當現在移過那個較小的圖像時,出現閃爍。
該網站上的圖像是一個畫廊的一部分,所以它是一個PHP變量,並在用戶從圖像列表中選擇時加載。因此將一個嵌入另一個非常困難。
我在網頁上有一張圖片,當用戶將鼠標懸停在圖片上時,會出現另一張圖片。當它在顯示的圖像上懸停時,它會閃爍。鼠標懸停元素閃爍
任何人都知道這是爲什麼?
託尼
UPDATE:徘徊時,第一個圖像不dissapear,只是另(較小)的圖像將會出現在左上角的頂部。當現在移過那個較小的圖像時,出現閃爍。
該網站上的圖像是一個畫廊的一部分,所以它是一個PHP變量,並在用戶從圖像列表中選擇時加載。因此將一個嵌入另一個非常困難。
因爲瀏覽器正在獲取新圖像。最好的解決方案是將兩個圖像合併爲一個,並且純粹使用CSS來更改背景位置:hover
,或者(對於IE6和非錨點元素)使用JS更改背景位置。
請參閱:CSS spritemap。好文章在這裏:http://www.alistapart.com/articles/sprites – 2009-10-06 18:33:16
圖像是用Javascript(createElement)動態創建的。它首先隱藏,然後在將鼠標懸停在某個現有圖像上時顯示。但是,然後盤旋在新的圖像導致閃爍 – 2009-10-06 18:37:48
好吧。我的解釋仍然適用。 – 2009-10-06 18:39:14
在IE中? IE不會緩存動態加載的圖像(使用CSS :hover
或Javascript事件)。您可以使用CSS精靈(基本上,使用一個圖像文件顯示兩個圖像,並利用定位顯示一個或另一個; tutorial,通過Mike Robinson鏈接),也可以使用預加載圖像設置:
var preloadImg = document.createElement('img');
preloadImg.src = 'path/to/image';
編輯:其他瀏覽器在第一次加載時也會這樣做。 IE可能會繼續在每臺交換機上執行此操作。
我想你可能使用IE瀏覽器。這是它在某些版本中實現緩存的一種錯誤。您可以通過配置您的Web服務器來發送proper cache headers或使用CSS sprites來解決此問題。我推薦後者,因爲這意味着更少的HTTP請求,即使沒有JS,預加載也能工作。
如果我理解你是對的,你可能會在每次觸發mouseover事件時替換圖像的src。因此,即使您的圖像被替換,您的事件也會被觸發,並且圖像被替換爲自身,這可能會導致閃爍。
它在所有瀏覽器中閃爍,我正在使用Chrome – 2009-10-06 18:42:51