虚拟滚动中图片懒加载需用IntersectionObserver绑定容器并预留缓冲区，配合节点复用处理、URL缓存及预取策略，实现视口驱动的精准加载。
虚拟滚动本身已经大幅减少了 DOM 数量，但滚动中图片仍可能成为新瓶颈——尤其当可视区域内的列表项含多张未优化图片时，会触发批量网络请求、解码和绘制，导致掉帧。关键不是“要不要懒加载”，而是“怎么让懒加载在虚拟滚动里真正生效且不打架”。
确保 IntersectionObserver 在滚动中持续有效
虚拟滚动容器通常用 overflow-y: auto，而原生 loading="lazy" 依赖浏览器默认滚动根（document），在局部滚动容器里会失效。必须改用 IntersectionObserver 手动监听，且需绑定到虚拟容器而非全局文档：
- 创建 observer 时传入
{ root: containerRef.value, rootMargin: '50px' }，预留缓冲区避免快速滚动时漏触发 - 每次滚动后，只对当前渲染的几条项中的
<img alt="Vue 3 中列表虚拟化怎么优化滚动时的图片懒加载性能" >调用observer.observe()，不要一次性观察全部数据项的图片 - 在
onUnmounted或列表重置时调用observer.disconnect()，防止内存泄漏
图片加载与虚拟渲染生命周期对齐
虚拟滚动会频繁复用或销毁 DOM 节点（如 RecycleListScroller），若图片加载逻辑挂在组件 onMounted，可能因节点复用导致重复请求或状态错乱：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 把图片加载逻辑写在
v-slot渲染函数内部，或封装为可组合函数（如useLazyImage(item)），确保每次渲染新项时独立初始化 - 使用
ref缓存已加载成功的图片 URL，避免滚动来回时重复请求同一张图 - 对占位图（loading/error）统一用内联 SVG 或 base64 字符串，避免额外 HTTP 请求
配合预加载与缓存策略降压
单纯“懒”不够，还要让“加载”更轻：
立即学习“前端免费学习笔记（深入）”；
- 服务端返回图片时，加上
Cache-Control: public, max-age=31536000，强缓存静态资源 - 对即将进入可视区的下几条数据（比如 buffer 区域），提前触发
fetch()预取图片 URL，但暂不设img.src，等真正进入视口再赋值，实现“预取+懒载”结合 - 移动端可加判断：
if ('loading' in HTMLImageElement.prototype) { img.loading = 'lazy' }，有原生支持就用原生，没有则 fallback 到 IntersectionObserver
本质上，虚拟滚动解决的是“渲染多少”，图片懒加载解决的是“请求多少”。两者协同的关键，在于把图片控制权从“数据驱动”收回到“视口驱动”，让每一张图的生命周期严格跟随它是否真的要被看见。
