使用background-image配合transition和预加载可有效减少图片闪烁。1. 设置固定宽高避免布局抖动；2. 用opacity和transition实现渐显；3. 通过new Image()预加载资源；4. 利用Intersection Observer按需加载；5. 启用硬件加速优化渲染，避免频繁重绘。
图片在加载时出现闪烁，通常是因为图片还未完全载入时页面已开始渲染，导致布局跳动或视觉闪现。使用 CSS 的 background-image 结合 transition 可以有效缓解这种问题，提升用户体验。
使用 background-image 替代 img 标签控制加载表现
直接使用 <img> 标签时，浏览器会在资源下载完成前显示空白或触发重排。改用带有背景图的容器，可以更好地控制占位和过渡效果。
- 给元素设置固定宽高，避免内容加载时布局抖动
- 通过 background-image 设置图片，配合 background-size 控制显示效果
- 初始状态设为透明，图片加载完成后渐显
结合 opacity 与 transition 实现淡入过渡
利用透明度变化隐藏未加载完成的图片，等样式就绪后再平滑显示，避免突然“弹出”造成的闪烁感。
.loading-bg {
width: 300px;
height: 200px;
background-image: url('image.jpg');
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.loaded {
opacity: 1;
}
JavaScript 可监听图片预加载完成后再添加 loaded 类：
立即学习“前端免费学习笔记（深入）”；
const img = new Image();
img.src = 'image.jpg';
img.onload = () => {
document.querySelector('.loading-bg').classList.add('loaded');
};
预加载图片避免视觉空白
在图片真正需要展示前，先在后台加载资源。这样切换或首次渲染时，图片已存在缓存中，不会出现延迟。
- 可通过隐藏的 <img> 或 new Image() 预加载
- 配合懒加载策略，按需加载可视区域图片
- 使用 Intersection Observer 判断元素是否进入视口
避免频繁重绘引起的闪烁
某些情况下，CSS 动画或频繁更新 background-image 可能引发重绘闪烁。可通过以下方式优化：
- 启用硬件加速：添加 transform: translateZ(0) 或 will-change: opacity
- 避免在动画过程中改变 background-position 或 background-size 频繁触发重绘
- 使用 opacity 和 visibility 控制显隐，而不是 display: none/block 频繁切换
基本上就这些方法。通过 background 布局 + 过渡动画 + 预加载机制，能显著减少图片加载时的闪烁问题，让页面更流畅。不复杂但容易忽略细节。
