JQuery 浏览器不会重新加载具有 usemap 的图像

Question

我使用图像 map (带有 ImageMapster 插件)让用户将鼠标悬停在图像的某些部分上，然后显示带有额外信息的更大版本。

然后我希望能够显示图像的其他部分，这需要不同的视角。为此，我让用户转到下一张图像(该图像是人物稍微旋转的图像)，以创建一种“3D 效果”。我通过让用户单击箭头或使用键盘上的箭头键(没有图像映射)来实现此目的。我通过更改图像的 src 属性并添加时间戳来实现此目的，以便浏览器重新加载图像。

但是问题就出现了:如果我更改具有图像映射的图像的 src，浏览器不会重新加载图像，也不会重新加载时间戳。我检查了页面的来源，src属性更改正确。

HTML:

<img id="test" src="image1.jpg" usemap="#map1" />
<map name="map1">
 <area shape="poly" coords="...." href="#" />
</map> 

JS:

function showPicture(){
  var newImg = "image"+newindex+".jpg";
  $("#test").removeAttr("usemap");
  $("#test").attr("usemap", "#imgmap"+newindex);
  $("#test").removeAttr("src");
  $("#test").attr("src", newImg+"?" + new Date().getTime());
}

如果我删除 usemap 属性，图像会重新加载，但如果我随后添加(不同的)图像映射，则不会重新加载。我尝试在新图像加载完成后更改图像映射(因此在 load() 功能中)，但这也不会使浏览器重新加载。

有人有什么想法吗？

提前致谢。

Answer 1

发现问题，我必须取消绑定(bind)并重新绑定(bind)ImageMapster到图像