使用CSS实现图片懒加载占位效果，先通过固定尺寸容器和条纹背景提供视觉提示，再用伪元素添加“光扫”动画增强反馈，图片加载后通过JS触发类名切换，实现淡入显示并隐藏动画，可选低质量图像占位（LQIP）提升内容感知，确保过渡自然、体验流畅。
图片懒加载时，为了提升用户体验，通常会先显示一个占位图或简单的视觉样式，等真实图片加载完成后再替换。使用 CSS 可以轻松实现美观且性能友好的占位效果。
1. 基础占位容器样式
为图片设置固定尺寸的容器，并添加背景色或简单图案作为占位提示：
.image-container {
width: 300px;
height: 200px;
background-color: #f0f0f0;
background-image: linear-gradient(45deg, #f8f8f8 25%, transparent 25%),
linear-gradient(-45deg, #f8f8f8 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #f8f8f8 75%),
linear-gradient(-45deg, transparent 75%, #f8f8f8 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
border-radius: 8px;
overflow: hidden;
position: relative;
}
这种条纹背景能清晰表明“此处有内容正在加载”，比纯灰块更友好。
2. 使用伪元素实现加载动画
可以在占位区域加入动态效果，让用户感知内容正在加载：
立即学习“前端免费学习笔记（深入）”；
.image-container::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
animation: loadingShimmer 1.5s infinite;
}
@keyframes loadingShimmer {
to {
left: 100%;
}
}
这个动画模拟了骨架屏常见的“光扫”效果，增强加载中的视觉反馈。
3. 图片加载后隐藏占位
真实图片加载完成后，用 JavaScript 添加类名来切换显示状态：
情感家园企业站5.0 多语言多风格版
下载
一套面向小企业用户的企业网站程序！功能简单，操作简单。实现了小企业网站的很多实用的功能，如文章新闻模块、图片展示、产品列表以及小型的下载功能，还同时增加了邮件订阅等相应模块。公告，友情链接等这些通用功能本程序也同样都集成了！同时本程序引入了模块功能，只要在系统默认模板上创建模块，可以在任何一个语言环境（或任意风格）的适当位置进行使用！
@@##@@
CSS 控制显示逻辑：
.lazy-image {
opacity: 0;
transition: opacity 0.3s ease-in-out;
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
.image-container.loaded .lazy-image {
opacity: 1;
}
.image-container.loaded::before {
display: none;
}
图片加载完毕后淡入显示，同时移除加载动画。
4. 可选：低质量图像占位（LQIP）
若希望占位更接近最终画面，可先内联一张极小的 base64 图作为背景：
.image-container {
background-image: url('data:image/jpeg;base64,/9j/4AAQSk...'); /* 小尺寸模糊图 */
background-size: cover;
}
这样用户能提前感知图片内容轮廓，体验更自然。
基本上就这些。通过合理的 CSS 样式和简单的 JS 配合，就能实现既美观又流畅的图片懒加载占位效果。关键是保持结构清晰、过渡自然，避免页面跳动。不复杂但容易忽略细节。
