【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

相关推荐
程序视点27 分钟前
Escrcpy 3.0投屏控制软件使用教程:无线/有线连接+虚拟显示功能详解
前端·后端
silent_missile32 分钟前
element-plus穿梭框transfer的调整
前端·javascript·vue.js
专注VB编程开发20年39 分钟前
OpenXml、NPOI、EPPlus、Spire.Office组件对EXCEL ole对象附件的支持
前端·.net·excel·spire.office·npoi·openxml·spire.excel
古蓬莱掌管玉米的神41 分钟前
coze娱乐ai换脸
前端
GIS之路1 小时前
GeoTools 开发合集(全)
前端
咖啡の猫1 小时前
Shell脚本-嵌套循环应用案例
前端·chrome
一点一木1 小时前
使用现代 <img> 元素实现完美图片效果(2025 深度实战版)
前端·css·html
萌萌哒草头将军2 小时前
🚀🚀🚀 告别复制粘贴,这个高效的 Vite 插件让我摸鱼🐟时间更充足了!
前端·vite·trae
布列瑟农的星空2 小时前
大话设计模式——关注点分离原则下的事件处理
前端·后端·架构
yvvvy2 小时前
前端必懂的 Cache 缓存机制详解
前端