CSS：悬停状态图像缓存

当我们定义悬停状态的任何CSS ... &关于悬停状态我们改变background:url('image path');将此图像预加载将在元素的第一个悬停下载..如果是这样那么如何预装它......我知道的JavaScript预载图片..是去上班......CSS：悬停状态图像缓存

来源

2010-12-02 Moon

如果你想避免只有你悬停状态图片加载它们，而不是预加载它们，为什么不创建同时拥有正常和悬停图像的精灵？这样，您可以确保所有的悬停状态图像都将被加载，同时减少所有请求的开销。那么您需要做的唯一的事情就是设置background-position属性的值。

至于你的第一个问题，我认为找到答案的最佳方式是使用两个大图像（一对壁纸可以工作）并自己测试，尽管我怀疑图像只会在鼠标在原始图像上方，因为那是代码正在执行的时间。

希望这会有所帮助！

来源

2010-12-02 10:13:08

答案是听到`：hover`状态代码会在鼠标结束时执行，因此`background：url（'image path'）;``会在鼠标被下载后结束＆是的其他人是正确的，使用精灵...但这不是我的问题 – Moon 2010-12-03 11:18:36

你可以使用css sprites

来源

2010-12-02 10:08:37 caspermc

如果你有一个div的高度为20px，比如说，希望悬停时改变背景图片，可以使用一个图像，其中无悬停和悬停图形，顶部无悬停，悬停图像在底部。这两个部分应该是你的div的高度，在这种情况下，20px。然后，将您的CSS background-position首先设置为0px 0px（左上角）。这是默认设置（无悬停）。

当用户将鼠标悬停在div上时，请将background-position设置为0px -20px（20px向上）。这会将背景图像向上移动20px，显示sprite的下半部分，即悬停图形。当鼠标从div中移除时，精灵将回落到原始位置。

CSS：

 
.hoverDiv   /* Normal state */ 
{ 
    background: url('images/img.png'); 
    background-position: 0px 0px; 
} 

.hoverDiv:hover /* Hover state */ 
{ 
    background-position: 0px -20px;  /* Move background up by 20px, hiding the top image */ 
}

如果你有不同高度的div，只是用div的高度改变20px位。

如果你的精灵并排而不是彼此重叠，请使用background-position: -20px 0px;而不是0px -20px;来移动X轴。当然，你也可以积极地移动背景。

希望这有助于

詹姆斯

来源

2010-12-02 10:22:56 Bojangles

最好的事情做的是使用CSS精灵。精灵表是一个大图像，里面有很多图像，这些图像将在您的网站上使用。有什么好处？那么，这意味着只有一个http请求被发送来下载你的所有图像。因此，使网站加载速度稍快。

它将真正适用于悬停效果！

使用起来简单多了，代码简单多了。不像JavaScript，有着糟糕的可怕代码。这很容易学习。基于精灵中图像的位置。这是一个有用的教程，在Flowdev。这里有一个例子W3Schools

来源

2010-12-02 13:40:01 ryryan

CSS：悬停状态图像缓存

回答

相关问题