使用data-src存储真实图片地址，src指向极小占位图避免布局偏移；2. CSS设置图片自适应与淡入过渡效果；3. JavaScript通过IntersectionObserver监听视口进入，动态加载图片并添加loaded类；4. 结合data-srcset与sizes实现响应式多尺寸加载，提升性能与用户体验。
实现响应式图片懒加载，核心是结合CSS与HTML结构设计，配合轻量JavaScript逻辑。以下是一种简洁高效的实现方式，确保图片在视口内才加载，同时适配不同屏幕尺寸。
1. HTML结构：使用data-src占位
将真实图片地址放在data-src属性中，用src指向一个极小的占位图（如透明GIF），避免页面布局偏移。
alt="描述文字">
2. CSS样式：控制响应式与占位效果
通过CSS设置图片自适应容器，保持宽高比，并添加加载过渡效果。
.lazy {width: 100%;
height: auto;
display: block;
opacity: 0.7;
transition: opacity 0.3s ease-in-out;
}
.lazy.loaded {
opacity: 1;
}
这样图片加载完成后会淡入显示，提升视觉体验。
立即学习“前端免费学习笔记（深入）”；
情感家园企业站5.0 多语言多风格版
下载
一套面向小企业用户的企业网站程序！功能简单，操作简单。实现了小企业网站的很多实用的功能，如文章新闻模块、图片展示、产品列表以及小型的下载功能，还同时增加了邮件订阅等相应模块。公告，友情链接等这些通用功能本程序也同样都集成了！同时本程序引入了模块功能，只要在系统默认模板上创建模块，可以在任何一个语言环境（或任意风格）的适当位置进行使用！
3. JavaScript触发懒加载
使用IntersectionObserver监听图片是否进入视口，进入时再将data-src赋值给src。
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");
imageObserver.unobserve(img);
}
});
});
lazyImages.forEach(img => imageObserver.observe(img));
});
4. 响应式增强：配合媒体查询
如果需要根据不同设备加载不同尺寸图片，可结合picture标签或srcset，仍使用懒加载逻辑。
data-srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w"
sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"
alt="响应式图片">
在JavaScript中设置srcSet和
img.srcset = img.dataset.srcset;
img.sizes = img.dataset.sizes;
基本上就这些。利用现代浏览器的IntersectionObserver，加上合理的CSS过渡和响应式属性，就能实现流畅、高效、兼容性好的懒加载效果。不复杂但容易忽略细节，比如占位图和宽高比控制，这些对用户体验很关键。
