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 事件。

• 成功加载后可添加淡入动画（比如移除 loading class，配合 CSS transition）
• 失败时建议回退到备用图，或显示文案提示，同时上报错误便于监控
• 注意：动态设置 img.src 后立即绑定事件是安全的，不会错过事件

模块级懒加载（代码分割 + 动态 import）

对非首屏功能模块（如弹窗组件、图表库、富文本编辑器），可用 import() 实现按需加载 JS/CSS 资源。

• 把模块封装成独立文件，导出默认函数或对象
• 在用户触发动作（点击按钮、进入某路由）时，用 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" 原生属性可作为基础层），才能真正提升感知性能。