首页 > 文章 > 前端

CSS懒加载占位图设置技巧

时间：2025-11-26 23:05:33 449浏览收藏

学习文章要努力，但是不要急！今天的这篇文章《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学习网公众号也会发布文章相关知识，快来关注吧！