鼠標懸停圖像滯後

在我正在構建的網站上，我有5個外部鏈接，帶有鼠標懸停，鏈接到社交網站，如Facebook，Twitter，YouTube等。這些鏈接有一個小圖像（15px x 15px）社交網絡標識爲白色，然後是白色文本的名稱。我正在使用javascript將img src更改爲徽標的彩色版本，並將文本的顏色更改爲淺藍色。該文本立即改變顏色，但圖像有一些輕微的滯後，尤其是facebook的標誌。鼠標懸停圖像滯後

我在JavaScript的鼠標懸停代碼：

function FacebookMO(Type) { 
    if (Type == "Off") document.getElementById('Facebook').style.color = "#FFF", document.getElementById("FacebookLogo").src = "Images/Social/Facebook Logo W.png"; 
    if (Type == "Over") document.getElementById('Facebook').style.color = "#3B5998", document.getElementById("FacebookLogo").src = "Images/Social/Facebook Logo B.png"; 
    if (Type == "Clicked") document.getElementById('Facebook').style.color = "#141e33"; }

代碼爲其他4個環節，除了Facebook的同一已更改相關鏈接/文本/ IMG。這裏是所有相關的html代碼;

<a href="http://www.facebook.com/WrecRecords" class="bar3" id="Facebook" 
onmouseout="FacebookMO('Off')" onmouseover="FacebookMO('Over')" onmousedown="FacebookMO('Clicked')" 
onmouseup="FacebookMO('Over')" style="padding-left:10px;"><img class="padr5" id="FacebookLogo" 
src="Images/Social/Facebook Logo W.png" style="height:15px; width:15px;"/>Facebook</a>

and the css too;

a.bar3 { 
    font-family:"Bebas Neue", sans-serif; 
    font-size:20px; 
    color:#FFF; 
    padding:0px 20px; 
    text-decoration:none; 
}

我試過預加載圖像通過不同的方法，包括可見性：隱藏;顯示：無;並將圖像加載到網頁中作爲1x1px img在底部，但我仍然有滯後。

在線延遲比在本地使用整個站點時嚴重得多。如果任何人都可以提供任何幫助，我會非常感激，因爲我真的難以預防如何防止這種滯後事件的發生。謝謝。

編輯：只測試了幾個不同的瀏覽器。在Firefox上，我沒有任何滯後，從本地文件進行測試時，它完美無缺地工作。好極了！但是，在網絡上，當你第一次懸停在它上面時，會有約3秒的輕微延遲，然後完美無缺地工作。（想想我只需要在頁面加載時立即加載圖像）。鉻，這是我最初測試，仍然有這個輕微的滯後問題，雖然我完全不知道爲什麼仍然。我嘗試過在Internet Explorer上測試，但沒有腳本在那裏運行在所有atm。

來源

2013-12-21 Kiefer

這個訣竅不是使用單獨的圖像，而是使用所謂的spritemap。你的圖像是15x15px，現在你製作一個30x15px的圖像，其中包含正常和懸停狀態彼此相鄰。您不必更換圖像，而是更改背景圖像的background-position。

來自實例http://css-tricks.com/snippets/css/basic-link-rollover-as-css-sprite/

a { 
     display: block; 
     background: url(sprite.png) no-repeat; 
     height: 30px; 
     width: 250px; 
} 

a:hover { 
     background-position: 0 -30px; 
}

來源

2013-12-21 08:17:01

感謝您的幫助，我從來沒有聽說過的CSS spritemaps之前，但他們似乎相當有用（如我現在只是研究一下，發現了多達我可以關於他們以及他們是如何工作的）只是讓別人發現自己有相同的問題，並想知道更多關於CSS spritemaps的信息，我發現這個鏈接對解釋他們如何工作和他們的限制以及相當有用技巧或相對包裝div容器。也意識到我的源圖像是巨大的。再次感謝您的幫助，我對此表示感謝。 http://css-tricks.com/css-sprites-with-inline-images/ – Kiefer

鼠標懸停圖像滯後

回答

相關問題