如何用CSS和JavaScript强制刷新<div>背景图实现网页幻灯片

我想用HTML、CSS和JavaScript搭建一个每隔几秒展示新图片的简易网页幻灯片。这个幻灯片在本地Linux主机的Firefox里能正常运行，但部署到Linux Apache VPS后，虽然HTML页面能正常重载，但Firefox和Chrome都无法更新图片。服务器上的./slsh.jpg是个定期随机更新的符号链接，指向多张图片中的某一张。我用ID为a的div通过CSS实现了图片全屏展示，布局效果没问题，但没法用JavaScript的“URL+时间戳”方式避免缓存。用document.getElement...相关JS代码时，脚本直接崩溃，页面不再重载，也没法展示新图，只能手动强制刷新（比如Chrome按ctrl+shift+r）才能看到新图。

以下是我的代码：

JavaScript代码 #

<script>
  var timestamp = new Date().getTime();
  document.getElementById("a").style.backgroundImage = "url(./slsh.jpg?t=" + timestamp + ")";
  window.setInterval('refresh()', 3000);
  function refresh() {
      location.reload();
</script>

CSS代码 #

<style>
  body, html {
      height: 100%;
      margin: 0;
  }
  .bg {
      background-image: url('./slsh.jpg');
      height: 100%; 
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      background-color: rgb(10,10,10);
  }
</style>

HTML代码 #

<!DOCTYPE html>
<html>
<head>
<!--- here sits my CSS code --->
<!--- here sits my javascript code --->
</head>
<body id="body">
  <div class="bg" id="a"></div>
</body>

</html>

核心问题点 #

1. JavaScript语法错误：refresh函数缺少闭合的}，导致脚本执行直接中断，所有后续逻辑彻底失效。
2. 缓存问题未彻底解决：原代码仅在页面初始加载时给背景图加了一次时间戳，之后直接重载页面，重载后的页面会读取缓存的slsh.jpg，CSS中的背景图链接没有时间戳，无法绕过缓存。
3. 冗余的页面重载：没必要每次都重载整个页面，直接动态更新背景图URL即可，体验更流畅。

修复步骤及完整代码 #

1. 修复JS语法错误：补上refresh函数的闭合括号，同时将setInterval的字符串调用改为直接传函数引用（更规范且避免潜在问题）。
2. 动态更新背景图：移除页面重载逻辑，定时生成新时间戳并替换目标div的背景图链接，彻底绕过缓存。
3. 可选：服务器端禁用缓存：在Apache配置中给slsh.jpg添加缓存禁用规则，从服务器层面避免缓存问题，作为前端方案的补充。

修改后的完整HTML（整合CSS与JS）

<!DOCTYPE html>
<html>
<head>
<style>
  body, html {
      height: 100%;
      margin: 0;
  }
  .bg {
      height: 100%; 
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      background-color: rgb(10,10,10);
  }
</style>
<script>
  // 更新背景图的通用函数
  function updateBackground() {
      var timestamp = new Date().getTime();
      document.getElementById("a").style.backgroundImage = `url(./slsh.jpg?t=${timestamp})`;
  }
  
  // 页面加载完成后初始化，然后定时更新
  window.onload = function() {
      updateBackground();
      setInterval(updateBackground, 3000);
  };
</script>
</head>
<body>
  <div class="bg" id="a"></div>
</body>
</html>

Apache缓存配置补充（可选）

如果前端方案仍存在缓存问题，可以在VPS的Apache配置文件（如.htaccess或虚拟主机配置）中添加以下规则：

<Files "slsh.jpg">
    Header set Cache-Control "no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires 0
</Files>

该配置会强制浏览器不缓存slsh.jpg，确保每次请求都从服务器获取最新的符号链接指向的图片。

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