现象
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 请求