我有一个静态的HTML页面在地址https://MyPage/index.html
该页包含若干图像,它们位于https://MyPage/MyImages
这些图片在HTML源代码中链接如下:
…<span><img width=x height=y src="MyImages/imageXYZ.png"</span>…
当一个按钮被点击,或者更好的是,当页面被加载时,所有的图像链接应该通过附加一个随机数来重写,或者,例如,以毫秒为单位的当前时间,这样之后的链接看起来像这样:
…<span><img width=x height=y src="MyImages/imageXYZ.png?1587624427"</span>…
我相信可以在这里找到可能的起点:
更改页面上的所有链接
如何使用javascript更改所有链接
如何将页面上的每个链接更改为新的内容?
从那里开始,我如何添加到给定的例子(而不是一个恒定的重定向)一个随机数或以毫秒为单位的时间被附加到所有图像链接?
const time_to_img = () => {
document.querySelectorAll('img').forEach(e => {
const dateStr = Date.now();
const date = new Date(dateStr);
e.src = e.src + '?' + date.getTime();
})
}
window.addEventListener('load', time_to_img);
<img src="https://picsum.photos/id/1/300/200" alt="">
<img src="https://picsum.photos/id/7/300/200" alt="">
<img src="https://picsum.photos/id/12/300/200" alt="">
<img src="https://picsum.photos/id/22/300/200" alt="">
在循环中,您可以以毫秒为单位计算时间,这将添加到每个图像的SRC后?
现在,如果您想为每个图像添加不同的数字,则必须添加一些东西(随机数?)。在这里,对于4张图片,一切都在同一毫秒内完成
在此期间我已经这样做了:
<body onload="CacheBuster()";>
<script>
function CacheBuster() {
document.querySelectorAll('img').forEach(e => {
const dateStr = Date.now();
const date = new Date(dateStr);
e.src = e.src + '?' + date.getTime();
})
}
</script>
这样好吗?它似乎工作得很好!