【问题标题】：<img> blinks when src change in Firefox<img> 在 Firefox 中更改 src 时闪烁
【发布时间】：2012-07-20 01:47:30
【问题描述】：
我正在制作一张地图，当您将鼠标放在列表中的名称上时，地图的 <img> 将 src 属性更改为突出显示该区域的地图图像，我只使用 jquery 的 .attr() 方法改成这样。
$("img.map").attr("src","newmap.png");
它在除Firefox之外的所有浏览器中都很好用，当图像更改时，首先旧的消失然后有很短的时间没有显示任何内容，然后出现新图像，我怎样才能在像chrome这样的Firefox中顺利进行更改还是IE呢？？
（时间真的很短，但是当鼠标在目录中移动时，图像会在鼠标移动的整个过程中消失）。
或者您可能知道实现该效果的更好方法。谢谢
【问题讨论】：
标签：
javascript
html
firefox
image
【解决方案1】：
尝试预加载您的图片。闪烁发生在浏览器正在加载新图像时。
【解决方案2】：
这是因为src 属性明显改变了。好吧，新图像还没有下载。所以它必须向服务器发送一个请求并等待响应，而src 属性已经改变了。这就是为什么你在那里什么都看不到的原因。有办法解决这个问题。在 JavaScript 中，使用新图像作为源创建一个新图像元素。添加一个 onload 事件处理程序，它将更改您真正想要显示的图像的src 属性。是的，预加载可能有点困难，但它会减少初始页面加载时间并且它不会弄乱你的 HTML。
【解决方案3】：
在我的脑海中，悬停意图和背景图像的组合会有所帮助。
悬停意图很好，因为您不想下载不必要的图像。
如果您为包含 div（甚至图像本身）提供原始图像或上次查看图像的背景图像，则会减少闪烁效果。我怀疑这些图像更改的加载时间可能会有所不同，因此您也可以借此机会展示某种加载图标。
说了这么多，我认为拥有原始图像然后在每次悬停区域时添加新图像更有意义。这样，您只能在图像元素不存在时添加它（保存 http 请求），甚至可以进行更优雅的更改（例如淡入原始图像）
希望有帮助！
【解决方案4】：
问题是当你第一次引用它时浏览器正在下载它，而不是之前。
我只需要两个图像元素并隐藏/显示它们，而不是更改单个元素的 src 属性。