如何使用 LazyLoad 提升图片加载速度？

一、什么是LazyLoad？

LazyLoad是一种按需加载技术，核心原理是仅当图片进入浏览器可视区域（或接近可视区域）时才开始加载。对于含大量图片的网页（如电商、图库类网站），可减少50%以上的初始HTTP请求，显著降低服务器压力并提升首屏渲染速度。

二、LazyLoad的四大核心优势

• 降低带宽消耗： 首屏仅加载必要图片
• 提升SEO评分： Google将页面加载速度纳入排名因素
• 改善用户体验： 避免长时间白屏等待
• 节省服务器资源： 减少无效图片请求

三、原生JavaScript实现方案

现代浏览器支持Intersection Observer API，无需第三方库即可实现高效懒加载：

document.addEventListener("DOMContentLoaded", function() {
  const lazyImages = document.querySelectorAll("img.lazy");
  
  const imageObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.classList.remove("lazy");
        imageObserver.unobserve(img);
      }
    });
  });

  lazyImages.forEach(img => imageObserver.observe(img));
});

对应结构：

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

四、jQuery插件快速实现

对于传统项目，可使用轻量级jQuery插件：

$("img.lazy").lazyload({
  threshold: 200, // 提前200px加载
  effect: "fadeIn", // 加载动画
  failure_limit: 10 // 最大容错数量
});

五、React/Vue现代框架集成

React方案（react-lazyload组件）：

import LazyLoad from 'react-lazyload';

<LazyLoad height={200} offset={100}>
  <img src="real-image.jpg" alt="响应式懒加载"/>
</LazyLoad>

Vue方案（vue-lazyload插件）：

// main.js
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
  preLoad: 1.3,
  loading: 'loading.gif'
})

// 组件内
<img v-lazy="image.src">

六、进阶优化技巧

1. 占位符策略： 使用低质量图片占位符（LQIP）或SVG矢量占位
2. 自适应加载： 结合srcset实现响应式图片懒加载
3. 错误处理： 添加onerror回调防止加载失败影响布局
4. 预加载临界内容： 对首屏下方1-2屏内容提前加载

七、性能对比数据

通过合理配置LazyLoad，可使图片加载从“阻塞式同步加载”转变为“智能按需加载”，建议所有含图片超过10张的页面均采用此方案。