17370845950

懒加载是“用到再加载”的网页性能优化技术，核心是图片进入可视区时才加载；推荐用Intersection Observer API实现，兼容方案可用节流的scroll+getBoundingClientRect；需避免影响首屏关键图并处理加载失败。

懒加载是一种优化网页性能的技术，核心思想是“用到再加载”——图片或其他资源在进入可视区域时才开始请求和渲染，而不是页面一打开就全部加载。这样能减少初始请求量、节省带宽、加快首屏渲染速度，尤其对长列表或含大量图片的页面效果明显。

图片懒加载的关键原理

判断图片是否即将进入用户视野，主要依赖浏览器提供的 Intersection Observer API（推荐）或监听 scroll/resize 事件 + getBoundingClientRect() 计算位置。现代方案优先用 Intersection Observer，它性能更好、写法更简洁，且原生支持监听页面内元素与视口的交叉状态。

用 Intersection Observer 实现懒加载（推荐）

步骤很简单：给图片的 src 暂存到自定义属性（如 data-src），初始用占位图或空白；用 Intersection Observer 监听图片元素，一旦进入视口，就把 data-src 的值赋给 src，触发加载。

• HTML 中标记懒加载图片：
• JS 初始化观察器，设置阈值（比如提前 100px 开始加载）：const io = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; img.classList.remove('lazy'); io.unobserve(img); } }); }, { threshold: 0.01, rootMargin: '100px' });
• 遍历所有 .lazy 图片并开始观察：document.querySelectorAll('.lazy').forEach(img => io.observe(img));

兼容旧浏览器的降级方案（scroll + getBoundingClientRect）

如果需支持 IE 或老版本安卓浏览器，可用滚动监听配合位置计算。但要注意节流（如用 requestAnimationFrame 或 setTimeout 防抖），否则频繁触发影响性能。

• 获取图片相对于视口的顶部距离：const rect = img.getBoundingClientRect(); const isInView = rect.top 0;
• 滚动时批量检查可见图片，只对符合条件的加载，并移除监听或标记已处理
• 记得在图片加载成功后绑定 onload，失败时可 fallback 到占位图或错误提示

额外优化建议

懒加载不是万能的，搭配其他手段效果更佳：

• 使用 loading="lazy" 属性（原生懒加载）：现代浏览器已支持， 可直接启用，适合基础场景，但可控性不如 JS 方案
• 结合 srcset 和 sizes 做响应式图片，让不同设备加载合适尺寸
• 为懒加载图片添加简单 CSS 过渡（如淡入），提升视觉体验：img { opacity: 0; transition: opacity 0.3s; } img.loaded { opacity: 1; }
• 避免对关键首屏图片使用懒加载（比如 banner 图），否则可能影响 LCP 等核心指标

基本上就这些。懒加载不复杂但容易忽略细节，比如未及时 unobserve、没处理加载失败、或在 SSR 场景下服务端未预留占位结构。理清时机、边界和容错，就能稳稳提效。