前端集合 - 关注前端技术和互联网免费资源

关注前端技术和互联网免费资源

分类儿

页面儿

搜索儿

订阅儿

前端集合 RSS订阅
Home » 经验记录 » 如何利用JavaScript阻止image被缓存

如何利用JavaScript阻止image被缓存

发布者:前端集合 // 发布时间:2014-05-12 22:22:00 // 分类:经验记录 // 访问: 1,973 次 // 热度: 0人参与

在JavaScript中清除image的缓存

为何要阻止image被缓存,如何用最简单的方法来达到目地?且听我慢慢道来:

问题起因

最近做了一个配合后端ajax上传图片的模块,其运行过程如下:

问题来了:当用户点击取消按钮后,重新从系统选择一张新图片,前端拿到后端返回的新image url显示到页面,页面却显示的还是上一次的旧图片。

分析及解决方案

分析后发现:利用Firebug查看页面结构时,Firebug显示的图片是最新的图片,而页面却是旧图片。把上面的场景测试了好多遍,每次都会有这样的问题。

于是我首先想到的应该是image有缓存。如果在后端返回image url后,我为image url后面加一串不同的参数然后显示到页面,这样就能保证每次的图片都是最新的了。

代码如下,很简单:

// imgUrl为后端返回的图片url
var newImgUrl = imgUrl + '?' + (new Date()).getTime();
$('img').attr('src', newImgUrl);

问题解决。:)

Tags: image缓存, javascript清楚image缓存, 图片缓存

QQ在线客服提示“无法发起临时会话”的解决办法>>  << Node.js安装npm包出现网络错误的2种解决方案
Top