图片懒加载技术：优化Web性能的3种实现方案

1. 为什么需要图片懒加载

在Web开发中，图片通常是页面中最"重"的资源之一。当页面包含大量图片时（比如电商网站的商品列表、图库网站的照片墙），一次性加载所有图片会导致：

1. 带宽浪费：用户可能只看前几屏内容，却下载了所有图片
2. 性能下降：浏览器需要同时处理大量图片解码和渲染
3. 体验不佳：页面卡顿、滚动迟滞，特别是移动端更明显

懒加载的核心思想是：仅加载用户当前可见或即将看到的图片。当用户滚动页面时，再动态加载进入视口的图片。这种技术可以：

• 减少初始页面加载时间（LCP指标优化）
• 节省用户流量（对移动端尤为重要）
• 降低服务器负载
• 提升页面滚动流畅度

2. 原生loading="lazy"实现方案

2.1 基础实现

最简单的懒加载方案是使用HTML5原生支持的loading="lazy"属性：

html复制<img 
  :src="item.coverUrl" 
  class="img lazy-img" 
  alt=""
  loading="lazy"
/>

这个方案的优点是：

• 零JavaScript依赖：完全由浏览器处理
• 简单易用：只需添加一个属性
• 渐进增强：不支持的浏览器会正常加载图片

2.2 视觉优化技巧

为了提升用户体验，我们可以为未加载的图片添加占位效果：

scss复制.lazy-img {
  background-color: #f5f5f5;
  background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

这种"骨架屏"效果比空白区域更能让用户感知到内容即将加载。

2.3 注意事项

1. 兼容性：虽然现代浏览器都支持，但某些旧版本（如Safari 15.3以下）可能不支持
2. 阈值不可控：浏览器自行决定何时加载，无法精确控制触发距离
3. 不适合所有场景：对<picture>元素或背景图片无效

提示：可以通过document.querySelector('img').loading检测浏览器是否支持此特性

3. IntersectionObserver API方案

3.1 实现原理

IntersectionObserver API允许我们监听元素是否进入视口：

jav复制