虚拟滚动闪烁的根源是图片加载导致高度突变，真正有效的是“预渲染+占位策略+高度可控”组合：固定容器高度、使用占位图、延迟渲染图片内容，并配合缓冲区预加载与加载时机优化。
虚拟滚动本身不解决图片加载闪烁，真正起作用的是“预渲染 + 占位策略 + 高度可控”的组合。核心逻辑是：不让图片加载过程破坏虚拟滚动器对元素尺寸的预期，从而避免因高度突变引发的重布局、错位和视觉跳动。
为什么图片会导致虚拟滚动闪烁
虚拟滚动依赖每个列表项有稳定、可预测的高度。一旦某项内含图片，而图片尚未加载完成，浏览器会先按默认高度（如0或文字行高）渲染，等图片加载后突然撑开容器——这个高度变化会：
- 触发虚拟滚动器重新计算可视区域边界
- 导致当前项被错误卸载或重复渲染
- 与 scroll-snap、缓冲区预加载机制产生冲突，放大闪烁感
关键三步：固定高度 + 占位图 + 延迟渲染
不是等图片加载完再显示，而是从一开始就把“空间”和“状态”管理好：
-
给每项设置固定容器高度（如
height: 120px），内部用position: relative包裹内容，图片区域设为绝对定位占满；避免父容器随图片撑开 -
用纯色/骨架屏/低分辨率占位图填充图片区域，确保首次渲染即有视觉反馈，且尺寸恒定；可用 CSS
background-image或<img src="data:image/svg..."> -
图片加载完成后仅替换
src或背景图，不改变 DOM 结构或容器尺寸；配合loading="lazy"和 IntersectionObserver 控制加载时机
缓冲区与预加载协同防白屏
单纯占位只能稳住单帧，快速滚动时仍可能看到空白——这时要靠缓冲区提前“备货”：
- 在虚拟滚动配置中扩大预加载范围（如 Angular CDK 的
minBufferPx="800" maxBufferPx="1200"） - 对即将进入视口的项，提前触发图片加载（可用
requestIdleCallback或setTimeout(..., 0)微任务降级） - 为已卸载但图片未加载完的项保留占位状态，避免再次进入时重走加载流程
Vue/React 中的轻量实现示意
无需引入重型库，几行逻辑就能落地：
- React：用
useRef缓存已加载图片 URL，onLoad后更新状态；占位图通过条件 class 切换 - Vue：用
v-show控制占位层显隐，@load触发isLoaded = true；配合key防止复用错乱 - 通用技巧：给图片加
decoding="async"减少主线程阻塞，加fetchpriority="high"提升首屏关键图优先级
