JavaScript懒加载核心是按需加载，用IntersectionObserver监听视口实现提前加载，配合data-src、load/error事件处理及模块级import()代码分割，并兼顾降级与SSR兼容性。
JavaScript 实现懒加载的核心是“按需加载”——图片或模块只在进入视口（或即将进入）时才开始加载，避免初始页面大量请求阻塞渲染、浪费带宽。关键不在于写多少代码，而在于选对时机、用对 API、处理好边界情况。
用 IntersectionObserver 监听可视区域
这是现代懒加载的首选方案，性能好、API 简洁、原生支持，无需频繁监听 scroll 或 resize。
- 给需要懒加载的图片加一个占位属性，比如
，src先设为一张极小的 placeholder 或空字符串 - 创建
IntersectionObserver实例，设置rootMargin（如"100px"）实现“提前加载”，提升滚动流畅感 - 回调中判断
isIntersecting为 true 时，取出data-src赋值给src，并可调用unobserve()避免重复触发
图片加载完成与错误的兜底处理
光替换 src 不够：网络慢时会留白，加载失败时可能显示破损图标。必须监听 load 和 error 事件。
- 成功加载后可添加淡入动画（比如移除
loadingclass，配合 CSS transition） - 失败时建议回退到备用图，或显示文案提示，同时上报错误便于监控
- 注意：动态设置
img.src后立即绑定事件是安全的，不会错过事件
模块级懒加载（代码分割 + 动态 import）
对非首屏功能模块（如弹窗组件、图表库、富文本编辑器），可用 import() 实现按需加载 JS/CSS 资源。
立即学习“Java免费学习笔记（深入）”；
- 把模块封装成独立文件，导出默认函数或对象
- 在用户触发动作（点击按钮、进入某路由）时，用
import('./module.js')获取 Promise，then中执行初始化逻辑 - 搭配 Webpack/Vite，会自动打成单独 chunk；Vite 还支持预加载（
import.meta.preload）提示浏览器提前 fetch
简单降级与兼容性考虑
老浏览器（如 IE）不支持 IntersectionObserver，但不必完全放弃懒加载体验。
- 可用
getBoundingClientRect()+scroll事件手动判断位置，注意防抖（throttle）避免卡顿 - 检测
IntersectionObserver是否存在，存在则用新方案，否则 fallback 到传统方式 - 服务端渲染（SSR）场景下，首屏图片不应懒加载，可通过
data-ssr="true"标记跳过观察
不复杂但容易忽略：懒加载不是“越晚越好”，而是“足够早且不冗余”。合理设置提前量、做好加载状态反馈、兼顾可访问性（如 loading="lazy" 原生属性可作为基础层），才能真正提升感知性能。
