文
章
目
录
章
目
录
由于潘老师最近在开发一个页面要求动态刷新一个存放在固定目录固定名称的图片，该图片会不断地被新图片覆盖，但图片名称始终不变，要求在页面上实时地显示该图片。看上去该问题很简单，直接使用img标签引用图片地址就能显示，但是当图片改变了，即使你定时去请求图片，你会发现页面上的图片始终还是原来的图片。这是因为存在缓存的原因。那该怎么解决这个缓存问题呢？
解决办法
解决方案其实非常简单，就是在src的图片路径后面指定一个随机数参数就可以了，这样你每次去请求时，浏览器认为你每次是访问了不同的图片路径，从而每次都会重新访问服务器读取图片， 而不再读取缓存中的图片。虽然该随机数没有什么实际含义，但对浏览器而言，请求地址是不一样的。因此，具体的实现案例代码如下：
<script type="text/javascript">
$(function() {
// 定时刷新图片
setInterval("refreshPic()",2000);
});
// 刷新图片
function refreshPic(){
// 需要刷新的固定图片地址
var picUrl = '/pics/save.jpg';
// 每次刷新添加上随机数
$('#picId').attr('src', picUrl + "?" + Math.random());
}
</script>
</head>
<body>
<div class="easyui-layout" data-options="fit:true,border:false">
<img id="picId" alt="" src="/pics/save.jpg" style="width:500px;height:500px">
</div>
</body>
然后你去测试页面，会发现，只要该图片发生的改变，你都能刷新出最新图片，那么缓存的问题就解决了。
