如何用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() 判断是否在视口内。

立即学习“Java免费学习笔记（深入）”；

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

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

Designify

拖入图片便可自动去除背景✨

90

查看详情

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

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

• 浏览器自动处理可视区判断与加载时机，无需写 JS
• 仅适用于 img 和 iframe 标签，不支持自定义组件或背景图
• 可与 JS 方案共存：对不支持该属性的浏览器，再 fallback 到 Intersection Observer

用法：<img src="placeholder.jpg" loading="lazy" alt="如何用javascript实现懒加载_有哪些技术方案？" >，JS 中检测 'loading' in HTMLImageElement.prototype 判断是否支持。

框架级懒加载（React/Vue 等）

在组件化开发中，更推荐封装成可复用的懒加载组件或 Hook。

• React 可用 useIntersection 自定义 Hook（基于 IntersectionObserver）
• Vue 3 可用 useIntersectionObserver 组合式 API，或 v-lazy 指令
• 服务端渲染（SSR）项目要注意 hydration 一致性，避免水合后闪动

优势在于复用性高、与状态管理集成方便、易于统一打点和错误处理。

基本上就这些。优先用 Intersection Observer，辅以 loading="lazy" 做渐进增强；老项目需兼容 IE 才考虑滚动监听；框架项目建议封装成 Hook 或指令。懒加载不是“越懒越好”，要平衡首屏速度与用户预期（比如关键内容不宜懒）。

以上就是如何用javascript实现懒加载_有哪些技术方案？的详细内容，更多请关注php中文网其它相关文章！