先用占位图和data-src存储真实地址，通过JavaScript监听视口加载图片，CSS设置过渡效果和固定尺寸防止抖动，实现平滑懒加载。
图片懒加载是一种优化网页性能的常用技术，尤其适合图片较多的页面。对于CSS初学者来说，虽然懒加载的核心逻辑通常由JavaScript实现，但CSS在视觉效果和布局上起着关键作用。下面介绍如何用简单的HTML、CSS配合少量JavaScript实现基础的图片懒加载样式。
1. 基本原理与HTML结构
懒加载的思路是：页面初始时不加载所有图片，而是先用一个占位图或低质量缩略图代替，当用户滚动到该位置时再加载真实高清图片。
使用 data-src 属性存储真实图片地址，src 放置占位图或透明小图：
@@##@@
2. CSS样式设计
通过CSS设置图片容器的样式，让占位图看起来更自然，并添加加载动画提升用户体验。
立即学习“前端免费学习笔记（深入）”；
/* 图片基本样式 */
.lazy {
width: 100%;
height: 300px;
object-fit: cover;
background-color: #f0f0f0; /* 灰色背景作为占位 */
opacity: 0.7;
transition: opacity 0.5s ease-in-out;
}
/ 加载完成后显示清晰图 /
.lazy.loaded {
opacity: 1;
}
3. 简单JavaScript触发懒加载
虽然重点是CSS，但需要一点JS来判断图片是否进入视口并替换真实图片：
document.addEventListener("DOMContentLoaded", function () {
const lazyImages = document.querySelectorAll(".lazy");
const imageObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src; // 替换为真实图片
img.classList.add("loaded"); // 添加loaded类触发动画
imageObserver.unobserve(img); // 加载后停止监听
}
});
});
lazyImages.forEach((img) => {
imageObserver.observe(img);
});
});
4. 提升体验的小技巧
- 使用极小的模糊缩略图作为占位，让用户感知到内容结构
- 给图片容器设定固定高度，防止加载时页面跳动
- 搭配淡入动画（opacity + transition）让加载更平滑
- 确保图片响应式：设置 max-width: 100% 和 height: auto
基本上就这些。对初学者而言，理解结构和样式配合是关键。实际项目中可以先用这种简单方式实现，后续再学习更复杂的库如Lozad.js等。不复杂但容易忽略细节，比如忘记移除观察器或缺少过渡效果。保持简洁，逐步优化。
