2

当我们定义任何 CSS 的悬停状态时...&在悬停状态下，我们更改了background:url('image path');预加载此图像的将在元素的第一次悬停时下载。如果是这样，那么如何预加载它...我知道用于预加载图像的 javascript.. 是否可行...

4

4 回答 4

5

如果您试图避免让悬停状态图像只加载它们被悬停的它们，而不是预加载它们，为什么不创建同时保存正常和悬停图像的精灵呢？这样您就可以确保所有悬停状态图像都已加载，同时降低所有请求的开销。然后，您唯一需要做的就是设置background-position属性的值。

至于你的第一个问题，我想找到答案的最好方法是使用两张大图片（几张壁纸就可以了）并自己测试，尽管我怀疑这些图片只有在鼠标悬停时才会加载原始图像，因为那是执行代码的时候。

希望这可以帮助 ！

于 2010-12-02T10:13:08.173 回答
5

例如，如果您有一个div高度20px，并且希望在悬停时更改背景图像，请使用其中包含非悬停和悬停图形的图像，顶部是非悬停图像，底部是悬停图像. 这两个部分都应该是 div 的高度，在本例中为 20px。然后，首先将您的 CSS 设置background-position为0px 0px（左上角）。这是默认设置（无悬停）。

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

CSS：

.hoverDiv /* 正常状态 */
{
    背景：url('images/img.png');
    背景位置：0px 0px；
}

.hoverDiv:hover /* 悬停状态 */
{
    背景位置：0px -20px；/* 将背景向上移动 20px，隐藏顶部图像 */
}

如果您有div不同的高度，只需20px使用 div 的高度更改位。

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

希望这可以帮助，

詹姆士

于 2010-12-02T10:22:56.320 回答
2

你可以使用CSS 精灵

于 2010-12-02T10:08:37.377 回答
0

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

它真的很适合悬停效果！

它更容易使用加上简单的代码。不像 JavaScript，代码乱七八糟。这很容易学习。基于图像在精灵中的位置。这是一个有用的教程，关于Flowdev。这是W3Schools上的一个例子

于 2010-12-02T13:40:01.220 回答