使用CSS背景和JS控制透明度可提升图片加载体验，通过设置占位图、固定容器尺寸及监听load事件实现平滑过渡，避免布局跳动。
图片加载慢时，显示占位符能提升用户体验，避免页面布局跳动。HTML本身不直接支持图片占位功能，但结合CSS和JavaScript可以实现良好的占位效果。
使用CSS背景图作为占位符
将容器的背景设置为灰色或模糊缩略图，图片加载完成前先显示背景。
示例代码：
HTML:
<div class="img-container" style="background-image: url('placeholder.jpg');">
<img src="real-image.jpg" alt="内容图片">
</div>
CSS:
.img-container {
width: 300px;
height: 200px;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}
.img-container img {
opacity: 0;
transition: opacity 0.3s;
width: 100%;
height: auto;
}
图片加载完成后显示真实内容
通过监听图片的 load 事件，在加载完成后切换透明度。
JavaScript 示例：
const img = document.querySelector('.img-container img');
img.addEventListener('load', function() {
this.style.opacity = 1;
});
img.addEventListener('error', function() {
this.style.opacity = 1;
this.src = 'fallback.jpg'; // 加载失败时显示默认图
});
使用模糊缩略图占位（LQIP）
提前生成小尺寸模糊图作为 base64 嵌入背景或伪元素，节省请求。
立即学习“前端免费学习笔记（深入）”；
.img-container::before {
content: "";
background-image: url('data:image/jpeg;base64,/9j...');
background-size: cover;
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}
这种方式在懒加载或首屏优化中很常见，视觉过渡更自然。
设置固定宽高防止布局偏移
图片未加载时，容器没有尺寸容易造成页面抖动。给容器设定固定尺寸可避免此问题。
.img-container {
width: 300px;
height: 200px;
position: relative;
overflow: hidden;
}
基本上就这些方法。结合 CSS 背景、base64 占位图和 JS 控制 opacity，能有效改善图片加载体验。关键是让用户感知到内容正在加载，而不是空白等待。
