移动端图片懒加载优化

移动端图片懒加载优化踩坑记

问题背景

在某电商平台App中，商品详情页需要展示大量商品图片，页面加载时出现明显卡顿，用户反馈体验极差。经过性能分析发现，所有图片同时加载导致内存占用过高，首屏渲染时间超过3秒。\n

优化方案

1. 基础懒加载实现

// 使用Intersection Observer API
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('.lazy-img').forEach(img => {
  observer.observe(img);
});

2. 预加载策略优化

// 前后各预加载3张图片
const preloadImages = (currentIndex, total) => {
  for (let i = Math.max(0, currentIndex-3); i <= Math.min(total-1, currentIndex+3); i++) {
    if (i !== currentIndex) {
      const img = new Image();
      img.src = imageList[i].url;
    }
  }
};

实施效果

优化后：

• 首屏渲染时间从3.2秒降至0.8秒
• 内存占用下降70%
• 用户满意度评分提升25%

踩坑记录

1. 未处理图片加载失败情况，导致空白占位
2. 预加载时机不当，造成页面抖动
3. 忽略了网络状态判断，低网速下体验反而变差

最佳实践

建议使用loading="lazy"属性配合Intersection Observer，并添加错误处理和重试机制。