【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 步中,会通过修改 imgsrc 属性实现从占位图到实际图的切换,正常使用缓存时会从缓存中取图片数据,禁用后则会重新发送 http 请求

参考

vue-lazyload

相关推荐
curdcv_po2 分钟前
🔥🔥🔥结合 vue 或 react,去写three.js
前端·react.js·three.js
猫头_30 分钟前
uni-app 转微信小程序 · 避坑与实战全记录
前端·微信小程序·uni-app
天生我材必有用_吴用33 分钟前
网页接入弹窗客服功能的完整实现(Vue3 + WebSocket预备方案)
前端
海拥38 分钟前
8 Ball Pool:在浏览器里打一局酣畅淋漓的桌球!
前端
Cache技术分享1 小时前
148. Java Lambda 表达式 - 捕获局部变量
前端·后端
YGY Webgis糕手之路1 小时前
Cesium 快速入门(二)底图更换
前端·经验分享·笔记·vue
神仙别闹1 小时前
基于JSP+MySQL 实现(Web)毕业设计题目收集系统
java·前端·mysql
前端李二牛1 小时前
Web字体使用最佳实践
前端·http
YGY_Webgis糕手之路1 小时前
Cesium 快速入门(六)实体类型介绍
前端·gis·cesium
Jacob02341 小时前
UI 代码不写也行?我用 MCP Server 和 ShadCN 自动生成前端界面
前端·llm·ai编程