网页中通过js修改img的src属性刷新图片

业务:

采购业务流程中当财务人员打款后需要将打款流水图片上传到ftp服务器上。可是有时会上传出错。所以这里需要一个修改的图片的按钮。

问题:

当img的src的URL地址与之前相同(只更改图片,名称不变,不同图片相同名称)时,结果图片不变化,还是之前的图片。但通过chrome调试发现图片确实是变化的。那造成这个问题的原因时什么呢?

方法:

只需要每次刷新图片时,在img的src地址后面拼接一个随机数即可。

例子:

原有图片地址:<img src="http://img.boredou.com/1234556788.jpg" />

修改后图片地址:<img src="http://img.boredou.com/1234556788.jpg?23333333" />

原理:

经过在浏览起端调试,发现当src的地址不变时,浏览器会从缓存里面取出来。而浏览器缓存的还是之前的图片。所以图片不会变化。

而当img的src中拼接了随机参数,那么浏览器会认为这是一张新的图片(或者说访问了不同的路径),浏览器每次访问都会访问服务器,而不会访问缓存里数据。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,923评论 18 139
  • 太长了,还是转载吧...今天在看博客的时候,无意中发现了@Trinea在GitHub上的一个项目Android开源...
    庞哈哈哈12138阅读 20,274评论 3 283
  • 沉默,空气中死一般的沉默...... 我坐在沙发上,丈夫点了一支烟在客厅不住地踱来踱去。你近日的反常,我看在眼里却...
    圆馨阅读 302评论 0 1
  • “羽沫,羽沫,快醒醒!”当他睁开双眼时,看到了爸爸的笑容,“羽沫,今天正是入学考试呢!” 羽沫有点发懵,缓慢地...
    幽羽刃阅读 256评论 0 0
  • 说来也奇怪,表面总是那么热闹的一个人,一个人的时候却总是喜欢听一些悲伤的歌,然后沉浸在歌词的氛围中,享受那...
    苏剌阅读 310评论 0 0