懒加载核心是按需加载，推荐使用Intersection Observer API实现，辅以loading="lazy"渐进增强；老项目兼容IE可降级为节流滚动监听；框架中宜封装为Hook或指令，避免关键内容懒加载。
懒加载（Lazy Loading）的核心是“按需加载”，即当元素进入可视区域时才加载资源（如图片、视频、组件等），避免页面初始化时一次性加载大量内容，提升首屏性能和用户体验。JavaScript 实现懒加载有多种成熟方案，从原生 API 到第三方库，各有适用场景。
使用 Intersection Observer API（推荐）
这是现代浏览器原生支持的高效方案，取代了过去依赖 scroll / resize 事件监听 + getBoundingClientRect 的笨重做法，性能好、代码简洁、支持监听元素进出视口。
- 创建 observer 实例，配置 root（根容器）、threshold（触发阈值，如 0.1 表示 10% 进入视口就触发）
- 调用 observe() 监听目标元素（如 <img >）
- 在回调中判断 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 事件延迟或不触发导致体验不佳
不建议新项目首选此方式，仅作兼容兜底。
结合 loading="lazy" 属性（HTML 原生支持）
现代浏览器（Chrome 76+、Firefox 75+、Safari 15.4+）已支持 <img loading="lazy"> 和 <iframe loading="lazy">。这是最轻量、零 JS 的方案。
- 浏览器自动处理可视区判断与加载时机，无需写 JS
- 仅适用于 img 和 iframe 标签，不支持自定义组件或背景图
- 可与 JS 方案共存：对不支持该属性的浏览器，再 fallback 到 Intersection Observer
用法：<img src="placeholder.jpg" loading="lazy">，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 或指令。懒加载不是“越懒越好”，要平衡首屏速度与用户预期（比如关键内容不宜懒）。
