如何用原生JavaScript实现懒加载？这5种方法你必须掌握

第一章：JavaScript懒加载技术概述

JavaScript懒加载（Lazy Loading）是一种优化网页性能的常用技术，其核心思想是延迟加载非关键资源，仅在需要时才进行加载。这种策略特别适用于图片、视频、模块组件或长页面中的内容区块，能够显著减少初始页面加载时间，降低带宽消耗，并提升用户体验。

懒加载的基本原理

懒加载通过监听用户的滚动行为或其他触发条件，动态判断资源是否进入视口（viewport），一旦元素可见，则加载对应的资源。传统做法使用 window.onscroll 事件结合 getBoundingClientRect() 方法检测元素位置，现代浏览器则推荐使用 IntersectionObserver API，它具有更高的性能和更简洁的语法。

实现一个基础的图片懒加载

以下是一个使用 IntersectionObserver 实现图片懒加载的示例：

// 选择所有带有 data-src 属性的图片
const lazyImages = document.querySelectorAll('img[data-src]');

// 创建观察器实例
const imageObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // 将真实图片地址赋值给 src
      img.removeAttribute('data-src'); // 移除 data-src 防止重复加载
      observer.unobserve(img); // 停止观察已加载的图片
    }
  });
});

// 观察每一张懒加载图片
lazyImages.forEach(img => imageObserver.observe(img));

懒加载的优势与适用场景

• 提升首屏加载速度，优化关键渲染路径
• 减少服务器请求压力，节省用户流量
• 适用于图像画廊、新闻列表、无限滚动页面等长内容场景

技术方案	兼容性	性能表现
scroll 事件 + getBoundingClientRect	高	中（频繁触发重排）
IntersectionObserver API	现代浏览器支持良好	高（异步回调，不影响主线程）

第二章：基于事件监听的图片懒加载实现

2.1 懒加载核心原理与触发时机分析

懒加载（Lazy Loading）是一种延迟对象或资源初始化的策略，常用于提升应用启动性能。其核心思想是：仅在真正需要时才加载目标数据，避免冗余开销。

触发机制解析

常见触发条件包括属性访问、方法调用或事件监听。以 JavaScript 为例：

const lazyImage = new Image();
lazyImage.onload = () => {
  document.getElementById('container').appendChild(lazyImage);
};
lazyImage.src = 'image.png'; // 此时才发起网络请求

上述代码中，图片资源在 src 赋值时触发加载，实现按需获取。

应用场景对比

• 前端路由：页面模块动态导入
• ORM框架：关联对象延迟查询
• 长列表渲染：可视区域元素按需加载

2.2 scroll事件驱动的可视区检测实践

在长列表或图片墙等场景中，常需检测元素是否进入视口以触发加载或动画。通过监听 `scroll` 事件并结合 `getBoundingClientRect()` 可实现高效检测。

基本实现逻辑

监听窗口滚动，对目标元素位置进行实时判断：

window.addEventListener('scroll', () => {
  const element = document.querySelector('.target');
  const rect = element.getBoundingClientRect();
  if (rect.top < window.innerHeight && rect.bottom > 0) {
    element.classList.add('visible'); // 进入视口
  }
});

上述代码中，getBoundingClientRect() 返回元素相对于视口的位置，innerHeight 表示视口高度。当元素顶部低于视口底边且底部高于视口顶边时，判定为可见。

性能优化策略

频繁触发 scroll 事件易导致性能问题，可通过节流控制执行频率：

• 使用 throttle 限制函数调用频率
• 结合 Intersection Observer API 替代手动计算，提升效率

2.3 resize与orientationchange事件的兼容处理

在多设备适配开发中，resize 和 orientationchange 事件是响应屏幕尺寸变化的核心手段。尽管现代浏览器普遍支持这两个事件，但在移动端尤其是 iOS Safari 中，orientationchange 并不会总是触发 resize，需独立监听。

事件监听的统一注册

为确保跨平台一致性，建议同时绑定两个事件：

window.addEventListener('resize', handleResize);
window.addEventListener('orientationchange', function() {
    // 延迟执行以确保尺寸已更新
    setTimeout(handleResize, 50);
});

上述代码中，setTimeout 用于规避 iOS 下方向变更后 screen.width 延迟更新的问题。

兼容性差异对比

浏览器	resize触发时机	orientationchange是否触发resize
Chrome (Desktop)	窗口大小变化	否
Safari (iOS)	页面重排时	部分机型不触发

2.4 防抖与节流优化滚动性能

在处理高频触发的浏览器事件（如滚动、窗口缩放）时，频繁执行回调会带来显著的性能负担。防抖（Debounce）和节流（Throttle）是两种有效的优化策略。

防抖机制

防抖确保函数在事件停止触发后的一段时间才执行，适用于搜索输入等场景。

function debounce(func, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}
// 使用：window.addEventListener('scroll', debounce(handleScroll, 100));

上述代码中，timer用于存储定时器，每次触发事件都会重置延迟执行时间，仅当连续触发间隔超过delay时才会执行目标函数。

节流策略

节流则保证函数在指定周期内最多执行一次，更适合滚动监听。

• 使用时间戳实现：通过比较当前时间和上次执行时间差控制调用频率
• 使用定时器实现：设置延迟执行并防止重复注册

2.5 实战：纯JavaScript图片延迟加载组件封装

在网页性能优化中，图片延迟加载（Lazy Load）是提升首屏渲染速度的关键技术。通过监听滚动事件，动态加载进入视口区域的图片，可显著减少初始资源请求。

核心实现逻辑

使用 getBoundingClientRect() 判断元素是否进入可视区域，并结合 data-src 属性存储真实图片路径。

function lazyLoad() {
  const images = document.querySelectorAll('img[data-src]');
  images.forEach(img => {
    const rect = img.getBoundingClientRect();
    if (rect.top < window.innerHeight && !img.src) {
      img.src = img.dataset.src;
    }
  });
}
window.addEventListener('scroll', lazyLoad);

上述代码通过遍历所有带有 data-src 的图片标签，在其进入视口时将占位符替换为真实图像地址，避免无效加载。

优化策略对比

• 滚动节流：使用 throttle 控制事件触发频率
• Intersection Observer API：更高效的异步监听方案
• 预加载处理：对即将进入视口的图片提前加载

第三章：Intersection Observer API高效实现

3.1 Intersection Observer核心概念解析

Intersection Observer API 是现代浏览器提供的用于异步监测元素与视口相交状态的接口，避免了传统 `scroll` 事件带来的性能问题。

基本使用结构

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('元素可见');
    }
  });
}, {
  threshold: 0.1
});
observer.observe(document.querySelector('#target'));

上述代码中，threshold: 0.1 表示当目标元素有 10% 可见时触发回调。回调函数接收 entries 数组，包含每个被观察元素的交叉状态信息。

关键配置选项

• root：指定根容器（默认为视口）
• rootMargin：扩展或收缩 root 的边界
• threshold：触发回调的可见比例，可为数组

3.2 监听元素进入视口并动态加载资源

在现代前端性能优化中，延迟加载（Lazy Loading）是提升页面初始渲染速度的关键技术之一。通过监听元素是否进入视口，可实现图片、组件或数据的按需加载。

Intersection Observer API 基础用法

该功能推荐使用 IntersectionObserver 实现，避免频繁触发 scroll 事件带来的性能损耗。

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // 动态加载真实图片
      observer.unobserve(img);   // 加载后停止监听
    }
  });
});

// 监听所有待加载的图片
document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});

上述代码中，entry.isIntersecting 表示元素已进入视口；data-src 存储延迟加载的图像地址；unobserve() 避免重复加载。

适用场景与优势

• 长页面中的图片/视频懒加载
• 无限滚动内容预加载
• 动态引入重型组件（如图表、地图）

3.3 兼容性处理与降级方案设计

在微服务架构中，接口版本迭代频繁，良好的兼容性设计至关重要。应遵循“向前兼容”原则，确保新版本服务能正确处理旧版本请求。

字段兼容处理

新增字段应设为可选，避免强制解析导致反序列化失败。例如在 Go 结构体中使用指针或 omitempty 标签：

type User struct {
    ID   int    `json:"id"`
    Name string `json:"name"`
    Age  *int   `json:"age,omitempty"` // 新增字段使用指针，兼容旧客户端
}

该设计允许旧版客户端不传 age 字段，新版服务也能正常解析。

降级策略配置

通过配置中心动态控制降级开关，保障核心链路稳定性：

• 读服务降级：返回缓存数据或默认值
• 写服务降级：异步队列暂存请求
• 依赖服务不可用时自动熔断

第四章：响应式与预加载策略结合应用

4.1 根据网络状况动态调整加载优先级

在现代Web应用中，网络环境的不确定性要求资源加载策略具备动态适应能力。通过实时监测网络质量，可智能调整脚本、样式、图片等资源的加载顺序。

网络状态检测机制

利用 navigator.connection API 获取有效网络类型与下行速率：

if ('connection' in navigator) {
  const { effectiveType, downlink } = navigator.connection;
  // effectiveType: 'slow-2g', '2g', '3g', '4g'
  // downlink: 预估下行带宽（Mbps）
}

该信息可用于初始化加载策略：低带宽环境下延迟非关键资源加载。

优先级调度策略

• 关键资源（如首屏组件）始终高优先级
• 根据 downlink < 1.5 判断为弱网，启用懒加载与占位图
• 预加载策略降级，避免阻塞主线程

4.2 使用data属性管理懒加载资源路径

在现代前端开发中，通过 `data-*` 属性管理懒加载资源路径是一种高效且语义清晰的实践方式。它将资源的真实路径存储于自定义数据属性中，避免页面初始加载时的不必要请求。

基本实现结构

<img data-src="image-heavy.jpg" alt="懒加载图片" class="lazy">

上述代码中，`data-src` 替代了传统的 `src`，防止图片立即加载。JavaScript 可在适当时机读取该值并赋给 `src`。

动态加载逻辑

• 监听页面滚动或元素进入视口（Intersection Observer）
• 查找出所有带有 data-src 的元素
• 将 data-src 值赋给 src，触发资源加载
• 移除或标记已加载项，避免重复操作

这种方式提升了首屏性能，同时保持 HTML 结构清晰、易于维护。

4.3 图片占位符与加载状态反馈设计

在现代Web应用中，图片资源的异步加载常导致页面布局抖动或用户感知延迟。为提升用户体验，需引入图片占位符与加载状态反馈机制。

占位符类型设计

常见的占位方案包括：

• 固定尺寸的灰色背景块
• 低质量图像预览（LQIP）
• SVG骨架图

加载状态实现示例

function ImageWithPlaceholder({ src, alt }) {
  const [loading, setLoading] = useState(true);
  return (
    <div>
      <img 
        src={src} 
        alt={alt} 
        onLoad={() => setLoading(false)} 
        style={{ display: loading ? 'none' : 'block' }}
      />
      {loading && <div className="placeholder">Loading...</div>}
    </div>
  );
}

上述代码通过监听 onLoad 事件控制真实图片与占位元素的切换，确保视觉连续性。参数 loading 初始为 true，图片加载完成后置为 false，触发UI更新。

4.4 实战：支持多种媒体类型的懒加载通用方案

在现代前端开发中，页面性能优化离不开对图片、视频等媒体资源的懒加载处理。本节实现一个可扩展的通用懒加载方案，支持图像、视频、iframe 等多种媒体类型。

核心实现逻辑

通过 IntersectionObserver 监听元素进入视口，并根据 data-src 和 data-type 动态加载资源：

function initLazyLoad() {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const el = entry.target;
        const src = el.dataset.src;
        const type = el.dataset.type || 'image';

        switch(type) {
          case 'image':
            el.src = src;
            break;
          case 'video':
            el.src = src;
            el.play();
            break;
          case 'iframe':
            el.src = src;
            break;
        }
        observer.unobserve(el);
      }
    });
  });

  document.querySelectorAll('[data-src]').forEach(el => observer.observe(el));
}

上述代码中，data-src 存储真实资源地址，data-type 标识媒体类型。观察器触发后，依据类型设置对应属性并停止监听。

配置映射表

使用表格统一管理标签与属性映射关系：

媒体类型	标签	属性
image	<img>	src
video	<video>	src + play()
iframe	<iframe>	src

第五章：懒加载最佳实践与性能评估

合理设置阈值提升用户体验

在实现懒加载时，应避免临界触发导致用户滚动卡顿。通过 Intersection Observer API 设置合理的 rootMargin，可提前加载即将进入视口的内容。

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
}, {
  rootMargin: '50px' // 提前50px开始加载
});

资源优先级与预加载策略协同

对关键路径上的图片或组件采用低分辨率占位图配合懒加载，同时结合 loading="lazy" 原生属性控制非首屏图像。

• 首屏外的图片添加 data-src 替代 src
• 使用 WebP 格式降低占位资源体积
• 动态模块按路由拆分，配合 webpack 的 import() 懒加载

性能监控与量化评估

通过 Lighthouse 和 Performance API 收集关键指标，对比启用懒加载前后的表现差异：

指标	启用前	启用后
LCP (秒)	4.2	2.6
首包大小 (KB)	1870	960

错误处理与降级机制

为防止观察器失效或脚本加载失败，需提供 fallback 方案：

if ('IntersectionObserver' in window) {
  observer.observe(target);
} else {
  // 降级：滚动事件监听 + offsetTop 判断
  window.addEventListener('scroll', loadImages);
}