登录
首页 >  文章 >  前端

JavaScript懒加载常见实现方式有哪些？

时间：2026-02-15 12:13:43 442浏览 收藏

懒加载作为提升网页首屏性能与用户体验的关键技术，核心在于“按需加载”——仅在资源（如图片、视频或组件）进入可视区域时才触发加载，避免初始化时的冗余请求；现代开发首选高效简洁的 Intersection Observer API，辅以原生 `loading="lazy"` 属性实现渐进增强，老项目可降级为节流滚动监听兜底，而 React、Vue 等框架中则推荐封装为可复用的 Hook 或指令，兼顾性能、兼容性与工程化实践——但切记：懒加载不是盲目延迟，关键内容仍需优先呈现，方能真正平衡速度与体验。

如何用javascript实现懒加载_有哪些技术方案？

懒加载（Lazy Loading）的核心是“按需加载”，即当元素进入可视区域时才加载资源（如图片、视频、组件等），避免页面初始化时一次性加载大量内容，提升首屏性能和用户体验。JavaScript 实现懒加载有多种成熟方案，从原生 API 到第三方库，各有适用场景。

使用 Intersection Observer API（推荐）

这是现代浏览器原生支持的高效方案，取代了过去依赖 scroll / resize 事件监听 + getBoundingClientRect 的笨重做法，性能好、代码简洁、支持监听元素进出视口。

  • 创建 observer 实例，配置 root（根容器）、threshold（触发阈值，如 0.1 表示 10% 进入视口就触发）
  • 调用 observe() 监听目标元素（如 ）
  • 在回调中判断 isIntersecting，为 true 时加载真实资源，并取消监听（可选）

示例关键代码：

const lazyImages = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      observer.unobserve(img); // 加载后停止监听
    }
  });
}, { threshold: 0.1 });

lazyImages.forEach(img => observer.observe(img));

降级方案：滚动监听 + getBoundingClientRect

适用于需要兼容 IE 或极老版本浏览器的项目。原理是监听 scroll 事件，遍历所有待懒加载元素，用 getBoundingClientRect() 判断是否在视口内。

  • 注意节流（throttle）滚动事件，避免频繁计算拖慢页面
  • 需考虑页面缩放、iframe、固定定位等边界情况，逻辑较复杂
  • 移动端可能因 scroll 事件延迟或不触发导致体验不佳

不建议新项目首选此方式，仅作兼容兜底。

结合 loading="lazy" 属性（HTML 原生支持）

现代浏览器（Chrome 76+、Firefox 75+、Safari 15.4+）已支持 和