滚动时背景图闪烁的根本原因是容器尺寸不稳与图片未预加载，导致浏览器反复重排重绘：图片加载前容器高度为0，加载后突然撑开内容；或背景图切换时旧图清除、新图未就绪，尤其在懒加载、瀑布流、下拉刷新场景高频发生。
滚动时背景图闪烁，本质是容器尺寸不稳 + 图片未预加载
滚动中闪一下，不是图片慢，是浏览器反复重排重绘：图片加载前容器高度为 0，加载后突然撑开，下方内容被顶走；或背景图 URL 切换时旧图被清、新图未就绪。尤其在懒加载、瀑布流、下拉刷新场景里高频出现。
必须预设容器宽高比，不能只靠 background-size
仅设 background-size: cover 不解决占位问题。容器没高度，背景图再大也“看不见”，等图下来才分配空间，必然跳。
- 现代浏览器优先用
aspect-ratio: 16 / 9，配合width: 100%和height: auto - 兼容 iOS 15.4 之前版本，fallback 用
padding-top: 56.25%+position: relative+ 子元素position: absolute; inset: 0 - 父容器禁用
height、max-height或flex: 1强制覆盖比例 - 浮动布局必须加
display: flow-root或overflow: hidden防塌陷
background-image 切换前必须预加载，不能等 hover 或 scroll 触发时才取
JS 动态改 element.style.backgroundImage 或 Vue/React 绑定 :style="{ backgroundImage }" 时，浏览器会先清旧图、再请求新图——中间空白期就是闪的来源。
- 提前用
new Image().src = 'url.jpg'触发缓存，确保 onload 后再切换样式 - 多个图时批量预加载：
['a.jpg', 'b.jpg'].forEach(src => { const i = new Image(); i.src = src; }) - 路径必须和 CSS 中完全一致（含 CDN 域名、hash 版本），否则缓存不命中
- 避免在滚动回调里频繁设置
backgroundImage，改用 class 切换 + 预加载完成状态控制
硬件加速层不稳定也会导致白闪，尤其移动端
iOS Safari 或安卓 WebView 在滚动+动画叠加时，可能反复创建/销毁 GPU 图层，造成视觉残留白块——这不是资源没加载完，而是合成层抖动。
- 对滚动区域或背景容器加
transform: translateZ(0)+backface-visibility: hidden - 慎用
will-change: background-position，它可能引发过度优化反而更卡 - 避免在动画中同时改
background-position和background-size，两者都触发重绘 - 若用伪元素
::before承载背景图，对其做transform: translateX()动画，比直接 animating background-position 更稳
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
