1

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

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

它在除Firefox之外的所有浏览器中都很好用，当图像更改时，首先旧的消失然后有很短的时间没有显示任何内容，然后出现新图像，我怎样才能在像chrome或IE这样的Firefox中顺利进行此更改??
（时间真的很短，但是当在目录中移动鼠标时，图像会在鼠标移动的整个过程中消失）。
或者您可能知道实现该效果的更好方法。谢谢

4

4 回答 4

2

尝试预加载您的图像。闪烁发生在浏览器加载新图像时。

于 2012-07-19T17:43:45.720 回答
1

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

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

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

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

希望有帮助！

于 2012-07-19T17:47:30.090 回答
1

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

于 2012-07-19T17:45:14.523 回答
0

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

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

于 2012-07-19T17:43:52.637 回答