2025-09-15 【架构】图片懒加载

图片懒加载方式

为什么要做图片懒加载

维度	具体收益	量化参考
省	节省流量（服务器 + 用户）	首屏 30 张图 → 只加载 3 张，节省 80% 以上出站流量；移动端每 100 KB ≈ 1 分钱，电商大促日可省万元带宽费。
升 1	提升首屏速度	减少首屏 HTTP 请求数与下载量，Largest Contentful Paint（LCP）平均缩短 20%–40%，直接优化 Core Web Vitals。
升 2	提升用户体验	减少白屏/卡顿，低端机发热降低；滚动更跟手，用户留存率平均 +3%–7%。
升 3	提升 SEO 与转化率	Google 已将 LCP 作为排名因子，懒加载后评分提升，搜索曝光 +5%–10%；电商场景下，页面加载每快 100 ms，转化率可提 1%–2%。

1. 方式一 img 的 loading 属性设为“lazy”

HTML 元素延迟加载属性 —— loading 属性值 lazy 允许浏览器选择性加载 IMG 元素，根据用户滚动操作至其元素附近执行加载，一定程度起到节流的作用。

2. 方式二 offsetTop - scrollTop < = innerHeight

3. 方式三 IntersectionObserver + directive

import defaultImg from '@/assets/default_img.png';
// 异步加载图片
const imageAsync = (url: string) => {
  return new Promise<void>((resolve, reject) => {
    const img = new Image();
    img.src = url;
    img.onload = () => {
      resolve();
    };
    img.onerror = (err) => {
      reject(err);
    };
  });
};

export const lazyPlugin = {
  install(app: { directive: (arg0: string, arg1: { mounted: (el: any, binding: any) => void }) => void }) {
    app.directive('lazy', {
      mounted(el, binding) {
        el.src = defaultImg;
        const io = new IntersectionObserver((entries) => {
          entries.forEach((item) => {
            if (item.isIntersecting) {
              // 使用异步加载图片
              imageAsync(binding.value)
                .then(() => {
                  el.src = binding.value; // 成功后再替换 img 标签的 src
                })
                .catch((error) => {
                  console.log(error);
                });
              io.unobserve(item.target);
            }
          });
        });
        io.observe(el);
      },
    });
  },
};

注意：使用时，需考虑传入参数的值

4. 方式四 VUE3 VUE2 v-lazy

5. 液态图像响应式

<img
  src="image-small.jpg"
  srcset="image-small.jpg 400w, image-medium.jpg 800w, image-large.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  alt="描述文本"
/>

小程序图片懒加载

1. lazy-load 属性

• 小程序 image 组件自带的属性
• 优点： * 极致简单： 无需编写任何逻辑代码。性能开销极低： 属于底层能力
• 缺点： * 触发时机死板：无法自定义“提前量”（例如提前 200px 加载），在弱网环境下容易出现白屏

2. intersection-observer 组件

• 微信官方封装的一个逻辑组件（需通过扩展库引入）
• 优点： * 声明式编程： 像写 HTML 标签一样方便，代码结构清晰
• 缺点： * 灵活性受限： 虽然比属性强，但在处理复杂的“长列表回收”或“多重边界”时不够自由。

3. 自定义组件使用 wx.createIntersectionObserver

• 在组件内部直接调用 API 创建观察者。
• 优点： * 精准控制： 可以通过 .relativeToViewport({bottom: 300}) 自定义提前量
• 缺点： * 开发成本： 需要手动管理观察者的创建与销毁（disconnect），否则会导致内存泄露。