Question

我一直在这个新网站上工作，但我使用的“按钮”造成了大量的延迟，我想尽可能消除延迟。

麻烦的代码在这里：

<td>
    <a href="templink-info.html">
    <img style="display: none" src="images/icons/hover-info.png"/>
    <img src="images/icons/info.png"
        onmouseover="this.src='images/icons/hover-info.png';
            document.getElementById('home_text').style.display = 'none';
            document.getElementById('info_text').style.display = 'block';"
        onmouseout="this.src='images/icons/info.png';
            document.getElementById('home_text').style.display = 'block';
            document.getElementById('info_text').style.display = 'none';"
        onclick=""/>
    </a>
    <h3>Info</h3>
</td>

与相关的css：

#icon tr td img{
    width: 100px;
    height: 100px;}
#icon tr td p{
    margin: 0px;}
#icon tr td{
    text-align: center;
    width: 150px;}
#icon{
    margin-left: auto;
    margin-right: auto;}

Answer 1

https://css-tricks.com/snippets/css/basic-link-rollover-as-css-sprite/

您只需创建一个图像，同时按钮的两种状态都是按钮本身的两倍，就可以提高响应速度。然后，在鼠标悬停时，只需使用css更改background-position属性，而不是每次都加载新图像。这有效地“滑动”图像，使其正确的部分显示“通过”按钮。这个操作非常快，我认为你会看到很大的不同。

Answer 2

压缩图片，网站加载速度会快一些。

在jsFiddle上发布并指明问题，因为目前我不明白你想要什么，因为你的网站正常加载没有任何延迟。

如果你想用图像创建一个属性，你可以改变属性的背景，或者只是使用JS来实现你正在尝试的一些很酷的东西。

编辑：我过去做过，我的解决方案是使用背景图片并将其更改为：hover

http://puu.sh/qc98m/a828b9ae4e.png就是这样。

Answer 3

第一次悬停图像时，鼠标悬停速度很慢。幕后发生的事情是，当加载页面时，新的（悬停）图像没有被加载到浏览器的缓存中，必须在第一次鼠标悬停时加载，因此导致（视觉）延迟。随后的光标传递速度与通常预期的一样快。

一种可能的解决方案是在页面加载时立即预加载图像（显然会在后台发生）。来自a similar question：

function preloadImage(url)
{
    var img=new Image();
    img.src=url;
}

preloadImage('images/icons/hover-info.png');

为什么我有这么多滞后？

3 个答案: