在Firefox中更改src时<img/>闪烁

Question

我正在制作一张地图，当您将鼠标放在列表中的名称上时，地图的<img>会将src属性更改为突出显示该区域的地图图像，我只使用{{1} jquery的方法来改变它。

.attr()

它在所有浏览器中运行良好但是firefox，当图像改变时，首先旧图像消失然后在没有显示任何内容的短时间内然后出现新图像，我怎么能在firefox中像Chrome一样顺利地做这个改变或IE做什么？ （时间非常短但是当鼠标移动到目录中时，图像会在鼠标移动的整个时间内消失） 或者你可能知道一种更好的方法来实现这种效果。感谢

Answer 1

尝试预加载图片。浏览器加载新图像时会发生闪烁。

Answer 2

这是因为src属性明显改变了。好吧，新图片尚未下载。因此，当src属性已经更改时，它必须向服务器发送请求并等待响应。这就是为什么你没有看到任何东西。有办法解决这个问题。在JavaScript中，使用新图像作为源创建新的图像元素。添加一个onload事件处理程序，它将更改 想要显示的图像的src属性。是的，预加载可能会有点困难，但它会减少初始页面加载时间和它不会使HTML混乱。

Answer 3

在我的脑海中悬停意图和背景图像的组合将有助于此。

悬停意图很好，因为您不想不必要地下载图像。

如果您为包含div（或图像本身）提供原始或上次查看图像的背景图像，则闪烁效果会减弱。我怀疑这些图像更改的加载时间可能会有所不同，因此您可以将其用作显示某种加载图标的机会。

说了所有这些我认为拥有原始图像然后每次悬停一个区域时添加新图像更有意义。这样你只能添加尚未存在的图像元素（保存http请求），甚至可以做更多优雅的更改（例如，淡化原始图像）

希望有所帮助！

Answer 4

问题是浏览器在您第一次引用图像时下载图像，而不是之前。

我只需要两个图像元素并隐藏/显示它们，而不是更改单个元素的src属性。