用IntersectionObserver实现图片懒加载的核心是监听图片是否进入视口后动态设置src，比loading="lazy"更灵活，支持统一控制、占位图、错误降级及老浏览器兼容（需polyfill）。
用 IntersectionObserver 实现图片懒加载，核心是监听图片是否进入视口，再动态设置 src 或 srcset。它比 loading="lazy" 更灵活，能统一控制、加占位、处理失败、兼容老浏览器（需 polyfill）。
监听图片并触发加载
先给需要懒加载的 <img> 加一个标识，比如 data-src 存真实地址，src 可留空或设为占位图：
<img alt="描述" class="lazy">
然后创建观察器，监听所有带 .lazy 类的图片：
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.classList.remove('lazy');
observer.unobserve(img); // 加载完就停止监听
}
});
});
document.querySelectorAll('.lazy').forEach(img => observer.observe(img));
添加加载状态与占位处理
提升用户体验，可在加载前显示骨架、模糊图或纯色背景：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- HTML 中提前设
style="background:#f0f0f0;"或内联src指向小尺寸 placeholder - 加载时加 loading 类：
img.classList.add('loading')，配合 CSS 显示过渡动画 - 加载成功后移除类、替换 src；失败时 fallback：
img.onerror = () => img.src = '/fallback.jpg'
优化性能与兼容性
避免频繁触发、提升响应速度：
- 传入
{ rootMargin: '50px' }让图片在进入视口前 50px 就开始加载，防滚动过快出现空白 - 对大量图片，可节流观察回调，或分批 observe（如每 10 张一批）
- IE 不支持 IntersectionObserver，可用 官方 polyfill 或降级为 scroll + getBoundingClientRect
封装成可复用函数
把逻辑抽成函数，方便多处调用或配置：
function initLazyLoad(options = {}) {
const {
selector = '.lazy',
rootMargin = '50px',
placeholder = '/placeholder.svg'
} = options;
const observer = new IntersectionObserver((entries) => {
/* 同上加载逻辑，支持 placeholder 和 error 处理 */
}, { rootMargin });
document.querySelectorAll(selector).forEach(el => observer.observe(el));
}
initLazyLoad({ rootMargin: '100px' });
