Question

在我目前正在建设的网站上，我有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已被更改为相关链接/ text / 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;
}

我尝试通过不同的方法预加载图像，包括可见性：隐藏;显示：无;并将图像作为底部的1x1px图像加载到网页中，但我仍然有滞后。

在线延迟比在本地使用整个网站时差得多。如果有人能提供任何帮助我会非常感激，因为我真的很难过如何防止这种滞后发生。感谢。

编辑：刚在几个不同的浏览器上测试过这个。在Firefox上我没有滞后，它从本地文件测试时完美无缺。好极了！ :)但是在网络上，当你第一次将鼠标悬停在网上时会略微延迟大约3秒钟，之后会完美无缺地运行。（想想我只需要在页面加载时立即加载图像）。 Chrome，这是我最初测试的，仍然有这个轻微的滞后问题，虽然我完全不知道为什么。我尝试在Internet Explorer上进行测试，但根本没有脚本在那里运行。

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;
}

鼠标悬停图片滞后

1 个答案: