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

【问题标题】：Force loading an image to stop flickering?强制加载图像以停止闪烁？
【发布时间】：2011-07-30 21:22:56
【问题描述】：

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

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

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

任何 cmets 或建议将不胜感激:)。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

请不要喂 w3schools.com，A List Apart 和 CSS-Tricks 会是更好的参考。
如果您选择纯 CSS 方法（这通常是个好主意），请注意 IE6（令人讨厌）不支持 :hover 伪类，但 a 标签
为什么 w3schools 是一个不好的参考？这是一个很好的起点，即使它被某些人认为是不好的参考，答案仍然给出了最重要的关键字来搜索 CSS sprites。
@mu 太短：同意！为了公众的利益，我将把这个链接留在这里：w3fools.com
@holodoc: w3schools 总是在您搜索某些内容时出现在第一批搜索结果中，但这并不意味着它是一个很好的参考。这只是意味着他们擅长为 Google 进行优化。但 W3S 充满了错误，并且经常延续不良做法。请参阅我上面链接到的网站上的完整说明（还推荐了更好的来源）

【解决方案2】：

正如 holodoc CSS sprites 已经回答的那样，对您有很大帮助...

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：