如何实现按F5刷新页面时更新API提供的随机背景图片？

本地开发环境浏览器缓存策略较为宽松，部分场景下默认会禁用静态资源缓存，因此刷新即可重新加载图片。部署到GitHub Pages后，浏览器会对CSS中引用的固定URL资源启用强缓存策略，只要API请求地址没有发生变化，就会直接读取本地缓存的旧图片，不会发起新的资源请求。

最通用且易实现的方式是通过JavaScript动态生成带随机参数的背景图地址，利用随机参数让每次请求URL唯一，绕开浏览器缓存：

• 首先删除原有CSS中的background-image配置项，修改后CSS代码如下：

.mask {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
}

• 在页面中插入如下JavaScript代码，页面加载时会自动生成带时间戳参数的图片地址赋值给目标元素：

// 页面DOM加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  const maskElement = document.querySelector('.mask')
  // 追加时间戳参数，参数名和值不影响API返回结果，仅用于生成唯一URL跳过缓存
  maskElement.style.backgroundImage = `url('https://api.daihan.top/api/acg?t=${Date.now()}')`
})

如果该随机图片API是你自行维护的，还可以通过修改API服务的响应头实现，在图片响应中添加Cache-Control: no-cache, no-store, must-revalidate头，强制浏览器每次都发起新请求获取最新图片，无需修改前端代码。

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