首页 > 文章 > 前端

CSS懒加载占位图设置方法

时间：2025-12-13 15:41:28 153浏览收藏

推广推荐

支持 PC / 移动端，安全直达

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《CSS图片懒加载占位图设置技巧》，聊聊，希望可以帮助到正在努力赚钱的你。

使用背景色和伪元素可有效实现图片懒加载占位。首先为图片容器设置固定宽高及中性灰背景，保持布局稳定；其次利用::before伪元素添加“图片加载中”提示，并通过JavaScript在图片加载完成后添加loaded类实现淡入动画；还可根据图片类型（如头像、商品、横幅）设置不同占位背景色，提升界面细节与用户体验。合理运用这些CSS技巧能显著优化页面加载表现。

CSS初级项目如何制作图片懒加载占位图_background占位颜色控制

在制作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中对应使用：

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

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

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