当前位置：首页 > 文章列表 > 文章 > 前端 > CSS懒加载占位图设置方法

CSS懒加载占位图设置方法

2025-12-13 15:41:28 0浏览收藏

使用背景色作为占位

为懒加载图片设置统一的背景色是一种简单有效的方式。通过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中对应使用：

这样能更好地区分内容类型，提升界面细节质感。

基本上就这些。背景占位控制不复杂但容易忽略，合理使用能显著改善加载体验。

到这里，我们也就讲完了《CSS懒加载占位图设置方法》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！

HTML中使用<a>标签创建超链接，基本语法如下：<ahref="目标网址">显示文字</a>示例：<ahref="https://www.example.com">访问示例网站</a>说明：href属性指定链接的目标地址。标签内的文字是用户点击的可点击文本。扩展用法：打开新窗口：添加target="_blank"<ahref="h

上一篇: HTML中使用<a>标签创建超链接，基本语法如下：<ahref="目标网址">显示文字</a>示例：<ahref="https://www.example.com">访问示例网站</a>说明：href属性指定链接的目标地址。标签内的文字是用户点击的可点击文本。扩展用法：打开新窗口：添加target="_blank"<ahref="h