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="描述文本"
/>