Javascript HTML图像滚动-图像不为'；在翻车前是否未满载？

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

问题是，在我第一次滚动图像时加载它需要时间。有一个临时的空白，你可以看到图像逐渐加载。大约需要一秒钟，但很烦人

---

如何修复此问题以使滚动无缝？有没有办法预加载图像？

我发现一种非常适合滚动的方法是使用CSS精灵，即使用同时包含图像原始版本和滚动版本的图像。这样，两个版本同时加载，在它们之间进行更改只需更改

背景位置

样式。

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

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

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

希望有帮助，

---

Kobi

我可以马上想到两个选择：

css图像精灵，或

将

：将图像悬停在页面其他位置的隐藏
div
中

---

1、精灵： 例如，为“主页”链接设置一个背景图像，只需更改其在

：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精灵背景的元素设置高度


2、隐藏预加载元件：
#主页{
背景图片：url(http://example.com/bg.png);
背景重复：无重复；
背景位置：0 100px；
}
#主页：悬停{
背景图片：url(http://example.com/hoverBg.png);
}
#预载，
#预加载img{
显示：无；
}
将图像放在一个div中，样式设置为
{height:0；overflow:hidden；}
，这将使浏览器预加载图像
 1。回答：
使用

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：

无悬停{

边界：0

}

悬停{

边界：0

显示：无

}

a:悬停{

显示：内联

}

a:悬停，不悬停{

显示：无

}

可能重复——并且验收等级很差-\我认为CSS精灵绝对是go@James，我倾向于同意；它比将大量图像硬编码到每页缓存系统中更干净。另一方面，事先知道每个元素允许有多大的要求是有限制的（当然也限制了液体布局的范围，尽管我认为这是常识）。尽管这是一个非常有趣的解决方案，我想知道为什么没有人推荐JavaScript…只是说。。。lol@JCOC611：我自己对此的解释是因为我觉得使用JS不必要地使事情复杂化，另外：我不太擅长香草JS=/和雪碧一起去。它减少了所需的http请求数量，在您尝试通过一个小管道查看页面之前，这些请求听起来可能不是什么大问题。
<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>