强制加载图像以停止闪烁？

Question

当使用jQuery .hover（）函数切换出两个图像时，我经常在第一次加载时切换闪烁。我认为这是因为这两个中的第二个没有与主页一起加载，因此转换不是完全平滑的并且有轻微的闪烁。

理论上，这可以通过放置1px xpp图像并将display: none;设置为样式来进行校正，这将在主页加载时加载图像，从而同时对其进行缓存并消除闪烁

但是，我想知道是否有任何其他/更好的解决方案通常用于强制图像加载，因为我肯定不是唯一有这个问题的人。

任何意见或建议都将不胜感激:)。

Answer 1

防止悬停图像闪烁的更好方法是使用CSS sprites。

即使您决定使用JavaScript来实现悬停效果（尽管使用纯CSS可以完全实现悬停效果），您仍然可以在需要显示时加载“第二个”（悬停）图像。

Answer 2

正如已经通过holodoc回答的那样，CSS精灵会帮助你很多......

您是否只使用jQuery.hover（）进行图像切换？如果是，您可以使用CSS：hover伪选择器。

Answer 3

您只需要使用以下内容预加载它：

var preloadImg = new Image()
preloadImg.src = "/path/to/image.jpg"

然后，如果它仍然闪烁，请创建两个包含每个图像的HTML节点，然后在它们之间切换。