关于vue-lazyload重复请求图片的问题

roan
  • 53

1.我在项目中使用了vue-lazyload,但发现有些请求图片的会重复请求,导致网页加载过慢

2.
clipboard.png

3.
clipboard.png

4.

clipboard.png

回复
阅读 8.2k
8 个回答
✓ 已被采纳

加一个:key就可以了 :key='item.src'

在谷歌浏览器中的调试工具,network中,把disable cache 的勾去掉

wudongdong
  • 2
新手上路,请多包涵

今天刚好遇到这个问题,同一个图片会请求两次,不是google disabled cache的问题,也不是key没加上的问题,原因是请求图片的地址有session_start导致的,把session_start去了就只加载一次了。经查,是因为header头带了Cache-cancel = no Cache,估计跟google disabled cache是一样的!

一笑
  • 1
新手上路,请多包涵

也遇到这个问题,请问你你解决了吗

slj321
  • 2
新手上路,请多包涵

我也遇到同样问题了,请问是怎么实现的啊

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1  
})

加attempt属性

首先,应该是发送了重复请求的。
但是这个重复请求影响有多大?

  • 通常图片会有缓存,所以在使用缓存的情况下,不会重复请求,所以重复请求影响可以忽略不计。
  • 如果开启了 disable cache,则会重复请求。但是相比不用v-lazy,v-lazy的效果强很多,所以即使重复请求还是v-lazy划算。况且,用户根本不会主动disable cache。

综上所述,即使重复请求,还是要坚定的使用v-lazy.

宣传栏