[求救] HTML 如何让浏览器缓存图片重新加载，不是刷新

[Ger2EX]

HTML 如何让浏览器缓存图片重新加载

轮播效果已经实现了，pic2-pic4 需要定时更新图片，文件名不变，所以需要绕过浏览器的缓存问题，网上的方法就是给图片结尾时间或随机数，我用了+Math.random() 加随机数，然后浏览器缓存中也已经按定时加载了带有随机数结尾的图片

pic2.png?t=0.04027631228529205 pic2.png?t=0.07900295045139183 pic3.png?t=0.9565799922757663 ...

但浏览器页面上显示的轮播图还是初始页加载的图，没有变化，F5 刷新后，也只是将缓存中的随机图片文件给清理了，初始页图片都还在缓存里；只有 CTL+F5 才会重新加载；

<meta http-equiv="Refresh" content="30" />  # 也不起作用, F5 的效果

<!-- 轮播图容器 -->
<div id="roll">
     <ul class=""imglist> <!-- 图片容器 -->
          <li> <img src="/pic1.png" id="pic1"/> </li>
          <li> <img src="/pic2.png" id="pic2"/> </li>
          <li> <img src="/pic3.png" id="pic3"/> </li>
          <li> <img src="/pic4.png" id="pic4"/> </li>
     </ul>
</div>

<script>
    setInterval(function() {
         document.getElementById("pic2").innerHTML='<img src="/pic2.png?t=' +Math.random() + '" />';
         document.getElementById("pic3").innerHTML='<img src="/pic3.png?t=' +Math.random() + '" />';
         document.getElementById("pic4").innerHTML='<img src="/pic4.png?t=' +Math.random() + '" />';
     }, 6000);
</script>

我可能需要解决把新生成的带有随机数结尾的图片带

的图片容器中

请高人帮忙看一下， 给一下具体修改方法，谢谢！谢谢！

等待...

[lambdaq]

定时更新难道不应该写一个新的图片 url 嘛。。。

[cpstar]

HTTP 容器给图片（或者目录或者什么的）加 Cache-Control: no-cache

[cpstar]

或者 li 的 img 不写东西，全靠 js 调用填充

[yuzo555]

首先不建议在服务端搞动态图片，这样缓存优势都没了，也没法上 CDN 。最好是在前端实现随机选择图片文件名，固定的 URL 地址对应固定的图片。

然后就是你这个问题，innerHTML 是指元素内部的 HTML 。你这个 id="pic1" 应该设置到 <li> 上才是正确的；或者不使用 innerHTML ，改用 outerHTML 也可以。

[Ger2EX]

谢谢各位的点拨，解决了

```
var ext = Math.random() ; #先定义一个变量赋值随机数
document.getElementById("pic2").src='pic2.png?t=' + ext; # 带入新的图片
document.getElementById("pic2").innerHTML='<img src="/imgs/pic2.png?t=' + ext + '" />'; # 缓存加载新的图片

```