现代懒加载图片推荐使用intersectionobserver监听进入视口，设置data-src存真实地址，可见时赋值src并停止监听；兼容旧浏览器可用scroll+getboundingclientrect节流判断。
DOM 节点实现懒加载图片，核心是**监听图片是否进入视口，再动态设置 src 或 srcset**，避免页面初始加载全部图片。现代推荐用 IntersectionObserver，兼容性好、性能优、代码简洁。
用 IntersectionObserver 监听图片进入视口
这是目前最主流、最推荐的方式。它不依赖滚动事件，不会频繁触发，浏览器原生优化，且支持配置阈值和根边界。
- 给需要懒加载的
<img>标签添加一个占位属性（如data-src）存储真实图片地址，src可设为空或低分辨率占位图 - 创建
IntersectionObserver实例，回调中判断元素是否可见：当isIntersecting === true时，把data-src的值赋给src，并调用unobserve()停止监听（避免重复加载） - 可选：设置
rootMargin（如"50px"）让图片在真正进入视口前就开始加载，提升用户体验
手动 fallback：滚动 + getBoundingClientRect（旧版兼容）
若需支持 IE 或极老浏览器，可用传统方式：绑定 scroll 或 resize 事件，遍历所有懒加载图片，用 element.getBoundingClientRect() 判断是否在视口内。
- 注意节流（如用
requestAnimationFrame或setTimeout防抖），否则滚动时性能开销大 - 每次检查前先过滤已加载过的图片（例如加
data-loaded="true"标记），避免重复操作 - 计算逻辑：若
rect.top 0，说明图片至少部分可见
HTML 结构与基础样式建议
结构清晰、语义正确，能更好配合懒加载逻辑和可访问性。
- 使用
<img src="placeholder.jpg" alt="描述" loading="lazy">——loading="lazy"是浏览器原生懒加载提示（非强制，但可作为辅助） - 为未加载图片设置固定宽高或
aspect-ratio，防止布局抖动（layout shift） - 可搭配 CSS 添加淡入动画：
opacity: 0; transition: opacity 0.3s;，加载完成后通过 JS 加 class 触发opacity: 1
简单可复用的封装示例
几行代码就能封装一个轻量懒加载函数：
function initLazyLoad() {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.classList.add('loaded');
observer.unobserve(img);
}
});
}, { rootMargin: '50px' });
document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));
}
// 页面 DOM 加载完成后调用
document.addEventListener('DOMContentLoaded', initLazyLoad);
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
