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

<img> blinks when src change in Firefox

本文关键字：闪烁 src Firefox lt img gt 更新时间：2023-11-22

我正在制作一个地图，当你把鼠标放在列表中的一个名称上时，地图的<img>会将src属性更改为高亮显示该区域的地图图像，我只使用jquery的.attr()方法来这样更改它。

$("img.map").attr("src","newmap.png");

它在所有浏览器中都很好，但在firefox中，当图像发生变化时，先是旧图像消失，然后很短一段时间内什么都没有显示，然后出现新图像，我怎么能像chrome或IE一样在firebox中顺利地完成这一变化
（时间确实很短，但当鼠标在目录中移动时，图像会在鼠标移动的整个时间内消失）
或者你可能知道一种更好的方法来实现这种效果。感谢

尝试预加载图像。浏览器加载新图像时会出现闪烁。

发生这种情况是因为src属性明显发生了更改。嗯，新的图片还没有下载。因此，它必须向服务器发送请求并等待响应，而src属性已经更改。这就是为什么你在那里一点也看不到。这是有办法的。在JavaScript中，创建一个以新图像为源的新图像元素。添加一个onload事件处理程序，它将更改真正想要显示的图像的src属性。是的，这可能比预加载有点困难，但它会减少初始页面加载时间，而且不会打乱HTML。

在我的头顶上，悬停意图和背景图像的组合将有助于实现这一点。

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

如果给包含div（甚至是图像本身）一个原始或上次查看图像的背景图像，则闪烁效果会减弱。我怀疑这些图像更改的加载时间可能会有所不同，所以您也可以借此机会显示某种加载图标。

说了这么多，我认为每次悬停在一个区域时，都有原始图像，然后添加一个新图像更有意义。这样，您只能在图像元素不存在的情况下添加它（保存http请求），甚至可以进行更优雅的更改（例如，在原来的基础上淡出）

希望能有所帮助！

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

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