javascript如何实现懒加载_怎样提升图片和模块的加载性能

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 资源。

标签： css javascript java js vite 浏览器 懒加载 路由