资讯专栏INFORMATION COLUMN

关于浏览器缓存问题(图片更换后,页面仍优先读取缓存)

JasinYip / 2859人阅读

因为部分需求(跟换头像,切换轮播图等等)改变图片或者本地上传新图片,会导致图片缓存问题,从而达不到预期效果,还是加载原图片
查找了一些资料,总结出2个步骤:

1.在图片的路径的后面拼接 ‘?内容’ 解决,具体如下

(1)在图片src路径后面加上时间戳,使浏览器(移动端设备)认为每次加载的不是同个图片。
例子:

  timestamp(url) {
    let getTimestamp = new  Date().getTime();
    url= url + "?timestamp=" + getTimestamp
      return url
  }



表示不要缓存数据

以上是解决方法:大家视情况使用

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/116976.html

相关文章

  • 关于览器缓存问题图片更换页面优先读取缓存

    因为部分需求(跟换头像,切换轮播图等等)改变图片或者本地上传新图片,会导致图片缓存问题,从而达不到预期效果,还是加载原图片查找了一些资料,总结出2个步骤: 1.在图片的路径的后面拼接 ‘?内容’ 解决,具体如下 (1)在图片src路径后面加上时间戳,使浏览器(移动端设备)认为每次加载的不是同个图片。 例子: timestamp(url) { let getTimestamp ...

    chanjarster 评论0 收藏0
  • Web 性能优化:Preload,Prefetch的使用及在 Chrome 中的优先

    摘要:例如,将获得最高优先级,而将获得低优先级或中优先级。不带属性的的优先级将会等同于异步请求。对使用属性,不然将不会从中获益。因此,在标记中声明以被扫描器扫描。 这是 Web 性能优化的第 6 篇,上一篇在下面看点击查看: Web 性能优化:使用 Webpack 分离数据的正确方法 Web 性能优化:图片优化让网站大小减少 62% Web 性能优化:缓存 React 事件来提高性能 We...

    LiangJ 评论0 收藏0
  • [译] 如何运用新技术提升网页速度和性能

    摘要:简言之,我们认为好的用户体验从快速的内容传输开始,也就意味着性能美观。每一步我们都在探讨如何在获得好的用户体验和保证设计美感的同时,最小化对性能的影响。字型子集设定到目前为止,子集设定是改善网页字体性能最快的方式。 作者 Declan 原文链接 最近更新了我们的网站,它是经过了设计上的全面验收的。但实际上,作为软件开发者,我们会注重很多技术相关的零碎的东西。我们的目标是控制性能,注重性...

    he_xd 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<