javascript - 强制图像在 Chrome 上的 Javascript 中重新加载？

Question

我有两个完全独立的图像，分别称为 lock-icon.png 和 lock-unlock-icon.png。在某个事件中，我用 Javascript 更改了图像的来源

  document.getElementById("element").src = "/images/lock-unlock-icon.png";

这在 Firefox 上总是立即有效，但因为我在需要 WebGL 硬件加速的页面上显示实时高清视频流，所以我需要使用 Chrome。

它有时可以在 Chrome 上运行，但几乎不会立即运行；这似乎是至少几秒钟的随机延迟，至多从不。如果我在应该更改后检查图标的当前“图像位置”，则该 url 是新的正确 URL(这显然是预期的，因为它只是查询元素的 src 属性)。

我还应该做些什么来强制在 Chrome 中重新加载此图像？

Answer 1

在单独的 div 中加载两个图像，然后在当前可查看的图像上设置 display:inline，在另一个图像上设置 display:none。然后您可以通过更改 CSS 显示属性来切换两个图像。