点击按钮无法刷新Lorem Picsum随机背景图问题求助

这个问题我之前也碰到过！核心原因是浏览器的缓存机制：当你重复请求同一个URL的图片时，浏览器会直接复用本地已经缓存的图片，不会再向服务器发起新的请求，所以看起来后续点击没反应。

解决方案：让每次请求的URL唯一，绕过缓存 #

你只需要给图片URL添加一个动态变化的参数（比如随机数或者时间戳），这样每次生成的URL都是独一无二的，浏览器就会认为是新资源，重新请求图片。

方法1：添加随机数参数

修改你的代码为：

document.body.style.backgroundImage = `url(https://picsum.photos/200/300?random=${Math.random()})`;

这里用Math.random()生成一个0到1之间的随机数，拼在URL后面，确保每次的URL都不一样。

方法2：添加时间戳参数

如果你担心随机数有极小概率重复（虽然几乎不可能），可以用时间戳：

document.body.style.backgroundImage = `url(https://picsum.photos/200/300?ts=${new Date().getTime()})`;

new Date().getTime()会返回当前时间的毫秒数，每一刻都是唯一的，完全避免重复问题。

额外优化：简化获取body的方式

document.getElementsByTagName("body")[0]可以直接用document.body代替，代码更简洁易读。

为什么原来的代码只生效一次？ #

你原来用的?random参数，其实Picsum Photos的旧版API里这个参数的随机性并不稳定，而且即使参数存在，浏览器依然会缓存相同URL的请求。加上动态参数后，URL每次都变，缓存机制就不起作用了，自然每次点击都能加载新图片。

内容的提问来源于stack exchange，提问作者Alexandru Necula