懒加载的核心是元素进入视口时才加载资源，推荐使用 Intersection Observer API 监听并触发加载，兼容性不足时降级为节流 scroll + getBoundingClientRect，同时需处理图片 load/error 状态及首屏关键资源优化。
懒加载的核心是让图片或内容在进入视口时才开始加载，避免页面初始就请求大量资源。关键不是等页面加载完，而是监听滚动和元素位置变化，动态触发资源加载。
监听滚动 + 判断元素是否进入视口
用 Intersection Observer API 是最推荐的方式——它性能好、写法简洁、原生支持，无需手动计算偏移量或频繁触发 scroll 事件。
- 创建 observer 实例，设置
rootMargin（如"0px 0px 100px 0px"表示提前 100px 开始加载） - 给需要懒加载的图片加
data-src属性，src先设为空或占位图 - observer 回调中，当
isIntersecting为 true，把data-src赋值给src，并可调用unobserve()防止重复加载
兼容性处理：不支持 Intersection Observer 时降级
对于 IE 或老版本 Safari，可用传统 scroll + getBoundingClientRect 方案，但要注意节流（如用 setTimeout 防抖）避免卡顿。
- 监听
window.onscroll或addEventListener('scroll') - 遍历所有懒加载元素，用
el.getBoundingClientRect().top <= window.innerHeight判断是否已出现在视口内 - 加载后从待检查列表中移除该元素，减少后续计算量
图片加载完成与失败的状态处理
仅设置 src 不够，还需监听 load 和 error 事件，提升用户体验。
立即学习“Java免费学习笔记（深入）”；
- 加载成功后可添加淡入动画（比如加 class 触发 CSS transition）
- 加载失败时显示默认占位图或错误提示，避免空白或破图
- 可结合
loading="lazy"（HTML 原生懒加载）作为基础层，JS 懒加载作增强
配合真实项目的小技巧
懒加载不只是图片，也可用于视频、组件、广告位甚至分页列表。
- 首屏关键图片建议不懒加载（比如 banner 主图），确保核心内容优先呈现
- 服务端渲染（SSR）项目中，注意 JS 执行时机，避免 observer 在 DOM 渲染前就初始化
- 使用
decoding="async"属性帮助浏览器异步解码图片，进一步优化渲染流
不复杂但容易忽略。核心就三点：用对 API、管好状态、留好退路。
