HTML图像翻转 - 图像不完全翻转之前加载？ [英] HTML Image Rollover - Image isn't fully loaded before rollover?

问题描述

我有一个形象（左为归属链路的顶部），我使用的CSS：悬停在侧翻改变图像

I have an image (in the top left as a home link), and I use the CSS :hover to change the image upon rollover.

问题是，图像需要时间来加载我第一次翻滚吧。有一个临时的空白区域，你看到的图像加载增量。大约需要一秒钟，但它很烦人。

The problem is, the image takes time to load the first time I rollover it. There's a temporary blank space, and you see the image incrementally load. It takes about a second, but it's annoying.

我怎样才能解决这个问题这样的过渡是无缝的？有没有一种方法，以preLOAD的形象呢？

推荐答案

1。答：
使用 CSS精灵

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 {

img.nohover {

边框：0

}

img.hover {

img.hover {

边框：0;

显示：无

}

：悬停img.hover {

a:hover img.hover {

显示：内联

}

：悬停img.nohover {

a:hover img.nohover {

显示：无

}

这篇关于HTML图像翻转 - 图像不完全翻转之前加载？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！