强制加载图像以停止闪烁？ [英] Force loading an image to stop flickering?

问题描述

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

When using the jQuery .hover() function to switch out two images, I often find a flicker when they are being switched on the first load. I assume this is because the second of the two isn't loaded along with the main page, and so the transition isn't completely smooth and there's a slight flicker.

理论上，这应该然后通过放置一个1px乘1px图像与 display：none; 设置为样式，这将加载图像时，主页加载，因此缓存

In theory, this should be then rectifiable by placing a 1px by 1px image with display: none; set as styling, which will load the image when the main page loads, thus cacheing it at the same time and removing the flicker.

但是，我想知道是否有其他/更好的解决方案，通常用来强制图像加载，如当然，我不是唯一有这个问题的人。

However, I'm wondering if there's any other/better solutions that are commonly used to force an image to load, as surely I'm not the only one who has this issue.

任何意见或建议将非常感谢：）。

Any comments or advice would be greatly appreciated :).

推荐答案

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

A far better way to prevent hover image flickering is to use CSS sprites.

即使你决定使用JavaScript来实现悬停效果（虽然悬停效果完全可以通过纯CSS实现），你仍然会有你的第二在需要显示的时间加载。

Even if you decide to use JavaScript to achieve the hovering effect (although hover effect is perfectly achievable with plain CSS ) you will still have your "second" (hovered) image loaded by the time it needs to be displayed.

这篇关于强制加载图像以停止闪烁？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！