鼠标悬停图像滞后

Question

在我目前正在构建的网站上，我有 5 个外部链接，通过鼠标悬停，链接到 facebook、twitter、youtube 等社交网站。这些链接有一个白色社交网络徽标的小图像 (15 像素 x 15 像素)，然后用白色文字写出名字。我正在使用 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>

还有CSS；

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

我尝试通过不同的方法预加载图像，包括visibility:hidden; 显示：无；并将图像作为底部的 1x1px img 加载到网页中，但我仍然有延迟。

在线延迟比仅在本地使用整个网站时要严重得多。如果有人可以提供任何帮助，我将非常感激，因为我真的很困惑如何防止这种滞后的发生。谢谢。

编辑：刚刚在几个不同的浏览器上测试了这一点。在 Firefox 上，我没有任何延迟，并且从本地文件测试时它工作完美。耶！:) 但是在网络上，当您第一次将鼠标悬停在其上时，会有大约 3 秒的轻微延迟，然后就可以正常工作了。（我想我只需要在页面加载时立即加载图像）。Chrome，这是我最初测试的，仍然有这个轻微的滞后问题，尽管我完全不知道为什么。我尝试在 Internet Explorer 上进行测试，但 atm 上根本没有运行任何脚本。

Answer 1

这个技巧的技巧不是使用单独的图像，而是使用所谓的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;
}