JS动态获取图片缓存问题解决

原文地址：https://segmentfault.com/a/1190000021435926
作者：Fw恶龙
本文首发于：思否

问题场景

需求：

用户修改商品图片，需要及时更新商品图片，以便用户确认修改图片成功。

问题：

上传一张图片，通过js更新src属性刷新图片使其即时显示时，当img的src与上次地址无变化时（只更改图片，名称不变，不同图片名称相同）仍显示原来的图片。

原因：

当src的地址不变时浏览器不会重新加载图片仍从缓存里面读取。

解决：

通过前台处理，让JS每次生成一个随机数作参数放在sre后边，但该参数没有实际意义。

eg.
<img src='" + imgsrc + "t=" + Math.random() + "'>

原理：

由于在img的src中增加了随机数参数，多次访问图片时，浏览器认为是访问了不同的图片路径，浏览器会每次重新访问服务器读取图片， 而不再读取缓存中的图片。