【vue】vue-lazyload重复请求图片，chrome调试disable cache时出现

现象

chrome 调试开启 disable cache 时，使用 vue-lazyload 配置了懒加载的图片会请求两次

查看启动器，对应的两段代码如下：

• 第一段，第 426 行，异步加载图片

• 第二段，第 1329 行，渲染图片

vue-lazyload 图片懒加载原理

1. 配置了懒加载的 img 元素，初始化时渲染一小段 base64 格式的静态图片作为占位图片并记录位置

2. 页面快要滚动到占位图片时（比如滚动高度不足100像素），异步加载图片（发送请求）

3. 滚动到目标位置时渲染图片，修改 img 标签的 src 属性（会从缓存中读取图片数据，不会重新发 http 请求）

chrome network tools 勾选禁用缓存后图片加载两次的原因

在原理第 3 步中，会通过修改 img 的 src 属性实现从占位图到实际图的切换，正常使用缓存时会从缓存中取图片数据，禁用后则会重新发送 http 请求

参考

vue-lazyload