告别滚动卡顿：现代化图片懒加载方案实战

告别滚动卡顿：现代化图片懒加载方案实战

图片是网页性能的头号杀手之一。传统一次性加载所有图片的方式严重拖慢首屏速度。本文将介绍三种高效的现代懒加载方案：

📌 方案一：传统JS监听滚动（兼容但低效）

window.addEventListener('scroll', throttle(() => {
   
  const imgs = document.querySelectorAll('img[data-src]');
  imgs.forEach(img => {
   
    if (isInViewport(img)) {
   
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
    }
  });
}, 200));

⚠️ 缺点：需手动计算视口位置，频繁触发影响性能

🌟 方案二：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);
    }
  });
}, {
    rootMargin: '200px' }); // 预加载200px

document.querySelectorAll('img[data-src]').forEach(img => {
   
  observer.observe(img);
});

✅ 优势：浏览器原生支持，性能优异，可配置预加载距离

🚀 方案三：原生 loading="lazy"（极致简洁）

<img src="placeholder.jpg" 
     data-src="real-image.jpg" 
     loading="lazy"
     alt="示例图片">

💡 注意：Chrome/Firefox/Edge已支持，但Safari 15.4+才完全兼容

📊 性能对比（1MB图片测试）

最佳实践建议：

1. 优先使用原生 loading="lazy"，用Intersection Observer作降级方案
2. 务必设置图片的 width 和 height 避免布局偏移
3. 使用低质量占位图(LQIP)提升用户体验
4. 重要首屏图片应直接加载（可添加 fetchpriority="high"）

升级到现代懒加载技术后，某电商网站图片流量降低72%，页面跳失率下降19%！

性能优化永无止境，小小的懒加载改动即可带来显著提升。建议使用Lighthouse持续监测效果，根据实际场景选择最适合的方案。