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

Question

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

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

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

如有任何意见或建议，我们将不胜感激:)。

Answer 1

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

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