记一次项目中切换tab选项卡，图片资源重复多次发起请求的问题

linh0801
643 阅读2分钟

问题描述：

image.png

上图中有两个可切换的tab选项卡，当前所在的选项卡是“收件照片”模块，在列表中有照片这一列，接着切换到“首页”选项卡：

image.png

最后我们再切换回到选项卡“收件照片”， 先清空掉网络请求的资源列表：

image.png

从前面俩步骤中我们可以看到的问题：

  1. 首页并没有显示图片的地方，而此时发起了这么多图片资源的请求
  2. 已经请求过图片资源了，为何浏览器没有缓存图片，而再次发起请求

虽然问题不影响正常的用户的使用，但是严重的浪费了流量资源，浪费了公司的money了，这个问题急需解决

解决过程

<img ref="imgData"
          :src="$upload_url + 'menuid=' + $route.meta.Sequence + '&appID=3&c=1&path=' + item.PhotoBigPath + '&h=200'"
          class="img"
          :data-img-DefectSite="item.DefectSite"
          :data-img-ModelType="item.ModelType" :data-img-path="item.PhotoBigPath" :data-img-id="item.imgId" :data-img-index="index"
          :data-img-type="typeVal" 
          :data-photoid="item.PatientPhotoID||item.CasePhotoID" 
          :data-photoattr="item.PhotoAttribute" data-angle="0">

我定位到图片发起请求的代码，刚开始我猜测的是不是缓存策略哪里出了问题，于是去百度了一下，耗费了一下午的精力却一无所获，这时候已精疲力尽了。先下班了，放空下自己，明天再战！

第二天，我想既然无法正面突破找到这个问题的根源，那就迂回作战，去看一下系统中其它的图片加载的地方有正常的问题没有。一番寻找下来，还真找到了。 对比两边的区别之后发现了问题的关键是 src 中 'menuid=' + $route.meta.Sequence

$route.meta.Sequence 是路由中定义的数据，此处在img src 这边使用是出于其它的业务需求， 由于src 是使用Vue 中的双向数据绑定的方式，所以当切换选项卡的时候路由发生变化，就会通知视图发生变化，src 请求路径也发生了改变，浏览器的缓存策略也就失效了，于是同一张图片就再次发起请求了

解决方案

data () {
 menuid: ''
}
created () {
    this.menuid = this.$route.meta.Sequence
}


<img ref="imgData"
          :src="$upload_url + 'menuid=' + menuid + '&appID=3&c=1&path=' + item.PhotoBigPath + '&h=200'"
          class="img"
          :data-img-DefectSite="item.DefectSite"
          :data-img-ModelType="item.ModelType" :data-img-path="item.PhotoBigPath" :data-img-id="item.imgId" :data-img-index="index"
          :data-img-type="typeVal" 
          :data-photoid="item.PatientPhotoID||item.CasePhotoID" 
          :data-photoattr="item.PhotoAttribute" data-angle="0">

如此处理后， 只有当这个页面初次创建的时候，且浏览器没有缓存过图片的时候会才会发起请求。

avatar
文章
阅读
粉丝