Question

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

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

如何解决此问题，以便翻转无缝？有没有办法预加载图像？

Answer 1

我可以想到两种选择，即：

css image sprite，或
将:hover图片放入页面中其他位置的隐藏div。

1，精灵：

对于CSS Sprite，请为“主页”链接创建一个背景图片，然后只需更改其在: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>

Answer 2

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

Answer 3

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

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

虽然此标记仍然是文档的一部分，但由于“display：none”设置，它不会显示甚至呈现。您甚至可以监听其load事件，并在加载后从DOM中完全删除标记，以保持文档中的“垃圾”。将图像加载到内存后，每次引用相同的URL时都会自动重复使用，因此一旦将另一个图像的源设置为相同的URL，它就会从内存中加载。

希望有所帮助， KOBI

Answer 4

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

显示：无

}

a：悬停img.hover {

显示：内联

}

a：悬停img.nohover {

显示：无

}

Answer 5

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

HTML图像翻转 - 图像在翻转之前未完全加载？

5 个答案:

1，精灵：

2，隐藏预加载元素：