javascript - mouseover 元素闪烁

Question

我在网页上有一张图片，当用户将鼠标悬停在它上面时，会出现另一张图片。然后将鼠标悬停在出现的图像上时，它会闪烁。

有人知道这是为什么吗？

托尼

更新：第一个图像在悬停时不会消失，只是另一个（较小的）图像出现在左上角的顶部。当现在移动到那个较小的图像上时，就会出现闪烁。

站点上的图像是图库的一部分，因此它是一个 php 变量，当用户从图像列表中选择时会被加载。所以将一个嵌入另一个是非常困难的。

Answer 1

因为浏览器正在获取新图像。最好的解决方案是将两张图片合二为一，或者纯粹使用 CSS 更改背景位置:hover，或者（对于 IE6 和非锚元素）使用 JS 更改背景位置。

Answer 2

在 IE 中？IE 因不缓存动态加载的图像（使用 CSS:hover或由于 Javascript 事件）而臭名昭著。您可以使用 CSS sprites（基本上，使用一个图像文件来显示两个图像，并使用定位来显示一个或另一个；教程，由Mike Robinson链接），或者您可以使用图像预加载：

var preloadImg = document.createElement('img');
preloadImg.src = 'path/to/image';

编辑：其他浏览器在首次加载时也会这样做。IE 可能会在每次切换时继续执行此操作。

Answer 3

If I understand you right, you probably replace the src of your image every time the mouseover event is fired. So, even when your image is replaced, your event is fired and the image is replaced with itself, which may cause flickering.

Answer 4

我猜你可能正在使用 IE。这是它在某些版本中实现缓存的方式的一个错误。您可以通过配置您的 Web 服务器以发送正确的缓存标头或使用CSS sprites来修复它。我推荐后者，因为这意味着更少的 HTTP 请求，并且即使没有 JS 也可以进行预加载。