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

Question

在使用jQuery .hover()函数切换两个图像时，当它们在第一次加载时被切换时，我经常会发现闪烁。我认为这是因为这两个页面中的第二个没有与主页一起加载，因此过渡不是完全平滑的，并且有轻微的闪烁。

从理论上讲，这应该是可以纠正的，放置一个1px x 1px的图像，并将display: none;设置为样式，这将在主页加载时加载图像，从而同时对其进行缓存并消除闪烁。

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

任何意见或建议都将非常感谢:)。

Answer 1

防止悬停图像闪烁的一个好得多的方法是使用。

即使你决定使用JavaScript来实现悬停效果(尽管悬停效果可以用普通的CSS实现)，你仍然会在需要显示的时候加载你的“第二个”(悬停的)图像。

Answer 2

正如holodoc精灵已经回答的那样，它会给你很大的帮助……

您是否仅使用jQuery.hover()进行图像切换？如果是，您可以使用CSS :hover伪选择器。

Answer 3

你应该只需要用下面这样的东西来预加载：

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

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