CSS初级项目如何制作图片懒加载占位图_background占位颜色控制-css教程-PHP中文网

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

P粉602998670

发布： 2025-11-27 19:58:02

原创

539人浏览过

使用背景色和伪元素可有效实现图片懒加载占位。首先为图片容器设置固定宽高及中性灰背景，保持布局稳定；其次利用::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 类即可：