爲什麼在懸停時切換圖像時會有輕微的延遲？

你好我的網站上有一個背景圖片，當你將鼠標懸停在它上面時，它會改變背景圖片。爲什麼在懸停時切換圖像時會有輕微的延遲？

它工作正常，但唯一的問題是，切換圖像時可能會有輕微的延遲，可能會延遲0.2秒。所以當你將鼠標懸停在它上面時，div變爲空白0.2秒，然後出現新圖像。

有誰知道是什麼原因造成這個問題？我認爲它與懸停圖片加載的速度有關，如果是這種情況，那麼這個問題可能沒有解決方案，我只需要忍受它。

根本沒有與div相關的javascript或jQuery。

這是我的代碼。

HTML：

<div class="video-button"> 

</div>

CSS：

.video-button { 
    background: url('images/playbutton.png') center center no-repeat; 
    height: 113px; 
    width: 113px; 
} 

.video-button:hover { 
    background: url('images/playbutton-h.png') center center no-repeat; 
}

來源

2016-08-13 cup_of

瀏覽器必須加載圖像？您可能需要緩存它。 – keyboardSmasher

我會使用精靈。 http://stackoverflow.com/questions/4333695/css-hover-state-images-cache – keyboardSmasher

@keyboardSmasher是正確的。使用精靈，圖標字體或svg。 – 2016-08-13 07:42:02

負荷，在另一DIV即出側的屏幕視圖（不可見）的第二圖像。

一旦該圖像被加載，瀏覽器將不需要再次調用它，它將使用緩存在懸停時顯示它。

來源

2016-08-13 08:28:58

你在哪裏建議放置圖像？ –

嗯，我建議圖像可以放在身體上方，但使用絕對位置保持其位置（頂部）從可見區域上方，這樣圖像將不會在屏幕上可見，您的視圖將保持原樣。 –

爲什麼在懸停時切換圖像時會有輕微的延遲？

回答

相關問題