使用背景色和伪元素可有效实现图片懒加载占位。首先为图片容器设置固定宽高及中性灰背景，保持布局稳定；其次利用::before伪元素添加“图片加载中”提示，并通过JavaScript在图片加载完成后添加loaded类实现淡入动画；还可根据图片类型（如头像、商品、横幅）设置不同占位背景色，提升界面细节与用户体验。合理运用这些CSS技巧能显著优化页面加载表现。
在制作CSS初级项目时，图片懒加载是一个常见且实用的功能。为了让页面在图片加载前有更好的视觉表现，通常会使用占位图或背景颜色来替代空白区域。这不仅能提升用户体验，还能避免页面布局跳动。
使用背景色作为占位
为懒加载图片设置统一的背景色是一种简单有效的方式。通过CSS给图片容器设置默认背景，可以在图片未加载完成前保持视觉连贯。
示例代码：
img.lazy {background-color: #f0f0f0;
width: 100%;
height: 200px;
object-fit: cover;
}
说明：将图片宽高固定，并设置 object-fit: cover 可保证图片裁剪后仍填满容器。背景色建议选择与网站主题相近的中性灰，避免突兀。
立即学习“前端免费学习笔记（深入）”；
用伪元素模拟占位图
如果想更进一步，可以用CSS伪元素画一个简单的图标或文字提示，比如“图片加载中”。
.lazy-container {position: relative;
width: 100%;
height: 200px;
}
.lazy-container::before {
content: "图片加载中";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #999;
font-size: 14px;
}
.lazy-container img {
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.3s;
}
.lazy-container img.loaded {
opacity: 1;
}
JavaScript部分只需监听图片加载完成，然后添加 loaded 类即可：
const img = document.querySelector('img');
img.addEventListener('load', () => {
img.classList.add('loaded');
});
根据图片类型控制不同占位色
有时需要对不同类别的图片使用不同的占位背景，比如头像用浅蓝，商品图用浅灰。
可以通过添加类名实现：
.avatar { background-color: #e0f7fa; }.product { background-color: #f5f5f5; }
.banner { background-color: #fff8e1; }
HTML中对应使用：
<img src="..." class="lazy avatar" alt="">这样能更好地区分内容类型，提升界面细节质感。
基本上就这些。背景占位控制不复杂但容易忽略，合理使用能显著改善加载体验。
