2

我有一个图像（在左上角作为主页链接），我使用 CSS :hover 在翻转时更改图像。

问题是，图像在我第一次翻转时加载需要时间。有一个临时空白空间，您会看到图像逐渐加载。这需要大约一秒钟，但很烦人。

我该如何解决这个问题，使翻转是无缝的？有没有办法预加载图像？

4

5 回答 5

4

我能想到的有两个选择，副手：

  1. css 图像精灵，或
  2. 将:hover图像隐藏div在页面的其他位置。

1、精灵：

对于CSS Sprite，为“home”链接设置一张背景图片，然后简单地更改其在 上的位置:hover：

#home {
    background-image: url(http://example.com/spriteOne.png);
    background-repeat: no-repeat;
    background-position: 0 100px;
}

#home:hover {
    background-position: 0 200px;
}

不过，这确实需要为具有 css-sprite 背景的元素设置高度。

2、隐藏的预加载元素：

#home {
    background-image: url(http://example.com/bg.png);
    background-repeat: no-repeat;
    background-position: 0 100px;
}
#home:hover {
    background-image: url(http://example.com/hoverBg.png);
}
#preload,
#preload img {
    display: none;
}

<div id="preload">
    <img src="http://example.com/hoverBg.png" />
</div>
于 2011-01-02T22:10:23.880 回答
1

我发现一个非常适合翻转的方法是使用 CSS 精灵，即使用包含图像的原始版本和翻转版本的图像。这样，两个版本同时加载，并且在它们之间进行更改只是更改background-position样式的问题。

于 2011-01-02T22:09:25.460 回答
1

一种方法是使用相同的 URL 将不可见的图像添加到您的页面。因此，通过将以下内容添加到文档正文的开头，您实际上是在指示浏览器尽快加载此图像。

<IMG src="rolloverImage.png" style="display:none">

虽然此标签仍然是您文档的一部分，但由于“显示：无”设置，它不会显示甚至呈现。您甚至可以监听它的加载事件，并在加载后从 DOM 中完全删除标签，以将“垃圾”排除在文档之外。一张图片加载到内存后，每次引用同一个 URL 时都会自动重用，所以一旦将另一张图片的来源设置为同一个 URL，就会从内存中加载。

希望有帮助，科比

于 2011-01-02T22:10:14.220 回答
1

1. 答案： 使用CSS Sprites

2. 回答：或者创建这样的东西：

<a href="link.html">

<!-- Remove this img-tag if you don't have a 'nohover' background -->
<img alt="image" src="images/image.png" class="nohover" />

<img alt="imagehover" src="images/image.png" class="hover" />

</a>

和CSS：

img.nohover {

边框：0

}

img.hover {

边界：0；

显示：无

}

一：悬停img.hover {

显示：内联

}

一：悬停img.nohover {

显示：无

}

于 2011-01-02T22:12:34.517 回答
0

将图像放在样式设置为 的 div 中{ height: 0; overflow: hidden; }，这将使浏览器预加载图像。

于 2011-01-02T22:10:42.623 回答