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

Question

我使用带有以下代码的图像映射：

<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，还有很多替代方案。 在这篇文章中已经很好地解释了。