在MouseOver上更改图像有时会“闪烁”

Question

我使用带有以下代码的imagemap：

<img name="team" src="team.jpg" width="2560" height="1600" border="0" usemap="#team" alt="" />

<map name="team">
<area shape="rect" coords="495,308,887,794" alt="" onMouseOver="document.team.src='team_a.jpg'" onMouseOut="document.team.src='team.jpg'" >
<area shape="rect" coords="1022,513,1342,897" alt="" onMouseOver="document.team.src='team_b.jpg'" onMouseOut="document.team.src='team.jpg'" >
<area shape="rect" coords="1510,480,1679,691" alt="" onMouseOver="document.team.src='team_c.jpg'" onMouseOut="document.team.src='team.jpg'" >
</map>

这种方法很好，但通常图像的变化会“闪烁”。

有什么东西可以添加到代码中吗？我应该预先加载图片吗？也许这些图像很大？

Answer 1

解决方案是预加载图像。如果您使用的是jQuery，则可以依靠Lazyload。

无论如何，有很多替代方案，不仅仅是Javascript。在这个article中有很好的解释。