如何使用Javascript重新加载图片

Question

我该如何使用 JavaScript 重新加载并获取服务器上的新图像，而无需重新加载整个页面？

<img src="?option=com_fcse&task=getimage&width=100&height=40&characters=5&r=<?php echo mt_rand(0, 10000000); ?>" />

Thank you

- themhz

---

你考虑过在谷歌上搜索“javascript重新加载图片”吗？ - Pekka

是的，但那些例子看起来像是在缓存我的图像。可能我现在需要在JavaScript中重置rand。 - themhz

Answer 1

这应该可以做到：

thatImgObj.src = thatImgObj.src.replace(/&r=\d+/, "&r="+ ~~(Math.random()*1e7));

_{当然，再次获得相同的缓存破坏器的概率为1e-7 - 时间戳可能是更好的选择。}

- Bergi

---

是的，只需要替换那个URL参数。在这种简单情况下，您也可以使用其他字符串函数来删除末尾的数字并附加一些新的随机数字。 - Bergi

Answer 2

你的代码

添加了id="img1"

<img id="img1" src="?option=com_fcse&task=getimage&width=100&height=40&characters=5&r=<?php echo mt_rand(0, 10000000); ?>" />

JS代码：

var newImage = new Image();
newImage.src = document.getElementById("img1").src + "&_=" + new Date().getTime();

在URL末尾添加了一个缓存破坏器。

- Satpal

Answer 3

我认为最简单的方法是在JavaScript中更改src属性。例如：YouImageElement.src += "&rand2"+Math.random();

修改src属性将导致图像重新加载，并且因为它具有另一个在客户端设置的随机数，所以不应该被缓存。

- Turnerj