17370845950

懒加载的核心是元素进入视口时才加载资源，推荐使用 Intersection Observer API 监听并触发加载，兼容性不足时降级为节流 scroll + getBoundingClientRect，同时需处理图片 load/error 状态及首屏关键资源优化。

懒加载的核心是让图片或内容在进入视口时才开始加载，避免页面初始就请求大量资源。关键不是等页面加载完，而是监听滚动和元素位置变化，动态触发资源加载。

监听滚动 + 判断元素是否进入视口

用 Intersection Observer API 是最推荐的方式——它性能好、写法简洁、原生支持，无需手动计算偏移量或频繁触发 scroll 事件。

• 创建 observer 实例，设置 rootMargin（如 "0px 0px 100px 0px" 表示提前 100px 开始加载）
• 给需要懒加载的图片加 data-src 属性，src 先设为空或占位图
• observer 回调中，当 isIntersecting 为 true，把 data-src 赋值给 src，并可调用 unobserve() 防止重复加载

兼容性处理：不支持 Intersection Observer 时降级

对于 IE 或老版本 Safari，可用传统 scroll + getBoundingClientRect 方案，但要注意节流（如用 setTimeout 防抖）避免卡顿。

• 监听 window.onscroll 或 addEventListener('scroll')
• 遍历所有懒加载元素，用 el.getBoundingClientRect().top 判断是否已出现在视口内
• 加载后从待检查列表中移除该元素，减少后续计算量

图片加载完成与失败的状态处理

仅设置 src 不够，还需监听 load 和 error 事件，提升用户体验。

• 加载成功后可添加淡入动画（比如加 class 触发 CSS transition）
• 加载失败时显示默认占位图或错误提示，避免空白或破图
• 可结合 loading="lazy"（HTML 原生懒加载）作为基础层，JS 懒加载作增强

配合真实项目的小技巧

懒加载不只是图片，也可用于视频、组件、广告位甚至分页列表。

• 首屏关键图片建议不懒加载（比如 banner 主图），确保核心内容优先呈现
• 服务端渲染（SSR）项目中，注意 JS 执行时机，避免 observer 在 DOM 渲染前就初始化
• 使用 decoding="async" 属性帮助浏览器异步解码图片，进一步优化渲染流

不复杂但容易忽略。核心就三点：用对 API、管好状态、留好退路。