javascript - 在 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。在这篇文章中得到了很好的解释。