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

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《如何用javascript实现懒加载_有哪些技术方案？》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

懒加载核心是按需加载，推荐使用Intersection Observer API实现，辅以loading="lazy"渐进增强；老项目兼容IE可降级为节流滚动监听；框架中宜封装为Hook或指令，避免关键内容懒加载。

懒加载（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+）已支持 和