虚拟滚动闪烁的根源是图片加载导致高度突变，真正有效的是“预渲染+占位策略+高度可控”组合：固定容器高度、使用占位图、延迟渲染图片内容，并配合缓冲区预加载与加载时机优化。

虚拟滚动本身不解决图片加载闪烁，真正起作用的是“预渲染 + 占位策略 + 高度可控”的组合。核心逻辑是：不让图片加载过程破坏虚拟滚动器对元素尺寸的预期，从而避免因高度突变引发的重布局、错位和视觉跳动。

为什么图片会导致虚拟滚动闪烁

虚拟滚动依赖每个列表项有稳定、可预测的高度。一旦某项内含图片，而图片尚未加载完成，浏览器会先按默认高度（如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" 提升首屏关键图优先级