轮播图闪烁的根本原因是图片未预加载及DOM重绘。需预加载所有图片、设置固定宽高、避免display切换、用transform/opacity控制显隐、确保img有真实src并配合requestAnimationFrame同步更新。
轮播图闪烁通常是因为 DOM 重绘或图片未预加载
HTML 轮播图在切换瞬间闪白、跳动、或出现短暂空白，根本原因不是 CSS 动画本身，而是 img 元素 src 切换时触发浏览器重新请求 + 解码 + 布局，尤其在低网速或高分辨率图下更明显。常见于用 src 属性动态替换图片的 JS 轮播实现。
必须预加载所有轮播图资源（含隐藏图）
不能等轮播到某张图才去加载它。即使图在 DOM 中已存在，若 src 为空或为占位符（如 "#" 或 ""），浏览器不会提前解码，切换时仍会卡顿。
- 所有
src，哪怕初始不可见 - 避免用
background-image+ 动态改style.backgroundImage，CSS 背景图不参与预加载队列，且无法监听加载完成 - 可用
loading="eager"强制立即加载（尤其对非首屏轮播） - 对关键轮播图，可额外用
new Image().src = "xxx.jpg"主动触发预加载
切换时禁用 layout 触发（避免重排重绘）
闪烁常伴随布局抖动，比如轮播容器高度随图片加载变化、display: none 切换导致回流、或未设宽高引发重绘。
- 轮播容器必须设置固定
width和height（不能依赖内容撑开） - 避免用
display: none / block控制显隐，改用visibility: hidden+opacity: 0或transform: translateX(100%) - 所有轮播项统一用
position: absolute叠加，只改变z-index或transform，不触发 layout - 确保图片有明确尺寸属性：
aspect-ratio固定比例
使用 requestAnimationFrame 同步动画帧
直接在定时器（setTimeout / setInterval）里改样式，容易因执行时机错开浏览器刷新周期，造成撕裂感或跳帧。
立即学习“前端免费学习笔记（深入）”；
let currentIndex = 0;
function nextSlide() {
const items = document.querySelectorAll('.carousel-item');
items[currentIndex].classList.remove('active');
currentIndex = (currentIndex + 1) % items.length;
items[currentIndex].classList.add('active');
// 关键：把 DOM 更新包裹进 rAF
requestAnimationFrame(() => {
// 此处可触发动画类、transform 等
});
}
更稳妥的做法是：所有视觉切换都基于 CSS transition + class 切换，JS 只负责控制 class，让浏览器自行优化渲染流水线。
真正稳定的轮播，不靠“过渡动效多炫”，而靠资源就绪、布局稳定、更新同步。最容易被忽略的是：明明写了 img 标签，却用 JS 清空了 src 再 later 赋值——这等于主动放弃预加载。
