之前在做一个用户维护个人信息的页面时,发现当用户上传新的头像后,我用js去更新img的src属性,页面上却仍然显示原来的头像。

图片上传成功后,img的src值不变,但是对应的图片已经改变了。
获取图片的src请求如下:

<img src="xxx/public/api/getUserPhoto?userId=12345"></img>

此时按道理从后端再发一次请求的话,是能够获取最新的图片的。

后来上网查了资料,发现是因为当img的src没有变化时,浏览器不会重新发送src对应的请求去加载图片,而是直接使用缓存里的图片,即之前的头像。

解决的方法很简单,在图片请求的末尾增加一个随机参数即可,由于时间戳能够做到每毫秒都不一样,因此使用时间戳作为随机参数会比较适合,代码如下:

var src = $('#imgId').attr("src");
$('#imgId').attr("src",src+'&date='+new Date().getTime());
//此时的src将变为"xxx/public/api/getUserPhoto?userId=12345&date=1477466400000"

由于每时每刻的时间戳都不同,所以每次更新src属性后,浏览器都认为是请求新的图片,就不会再使用缓存中的图片了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注