在大多数情况下,浏览器为了提高性能,会有相应的缓存措施,其中缓存图片是一种常见的做法,因为图片在请求时需要占用大量的流量,所以在短时间内缓存图片可以起到不错的提高响应速度的作用。但是在有些时候,我们不希望浏览器的这种对于图片的缓存,举个例子,使用后台管理前台显示的图片内容时,为了能够看出修改图片后的效果,我们需要实时的反馈,及在后台修改完图片后,无论后台还是前台,再次访问时看到的应该就是修改过后的图片。然而在实际中,修改后的页面在一段时间内还是原来的缓存图片,这样就不好,一种好的做法是把需要清除缓存的图片,每次访问的url都添加一个随机数作为参数,这样浏览器就不会把缓存的图片再次显示,而是会重新向服务器提出获取图片资源的请求。
具体实例如下:
页面上的图片组件:
<img src="images/image.jpg" id="img-id"/>
加载的时候使用随机数再次请求服务器而不是使用缓存图片:
1)使用jquery实现:
$(document).ready(function(){
//重新加载图片
$('#img-id').src=$('#img-id').src+"?"+Math.random();
});
2)使用js实现:
document.onload(function(){
document.getElementById('img-id').src=document.getElementById('img-id').src+"?"+Math.random();
});
这样,通过以上做法就可以达到加载图片时清除缓存的目的了。