uniapp中图片加载性能优化实战策略‌

一、引言

在移动端和小程序场景中，图片往往是最消耗带宽与首屏渲染时间的资源。不论是商品列表页、社交动态页，还是海报轮播图，如果不加以优化，就会出现：

• 首屏加载缓慢，用户长时间等待白屏或大面积 loading；
• 滑动时出现卡顿，网络请求导致页面抖动；
• 读取大量图片导致内存暴涨甚至崩溃；
• 流量消耗过大，影响用户体验和转化率。

结合 uniapp 跨平台特性（H5、微信小程序、支付宝小程序、原生 APP 等），我们需要在不同端进行统一但又有针对性的优化。本文将从以下几个方面展开：

1. 图片基础知识：格式、分辨率、体积对性能的影响。
2. 懒加载策略：利用 <image lazy-load="true">、自定义指令、Intersection Observer（H5）实现按需加载。
3. 占位图与渐进加载：如何在图片未加载完成时先显示“低质量占位图”或骨架屏。
4. 缓存与离线存储：使用小程序缓存机制、H5 Cache、Service Worker 等减少重复请求。
5. 属性与 CSS 优化：合理设置 <image mode>、width/height，减少布局抖动。
6. CDN 与压缩：引入 CDN 分发、使用 WebP/AVIF 格式、压缩工具链。
7. 分包与分离加载：在小程序端通过分包、子包加载减少首包大小。
8. 实战示例：一个商品列表页的优化前后对比，包含完整代码与 ASCII 图解。
9. H5 与小程序差异：在 uniapp 不同平台下需要注意的地方。

只要按照这些实战策略一步步优化，你就能显著提升 uniapp 项目的图片加载效率，带来更流畅、节省流量的用户体验。

二、图片基础知识

2.1 常见图片格式

• JPEG/JPG

  • 优势：有损压缩，人眼不易察觉细节损失，适合照片类图片。
  • 劣势：不支持透明通道，压缩后出现马赛克时无法恢复。

• PNG

  • 优势：无损压缩，支持透明通道，适合图标、徽章、UI 元素。
  • 劣势：体积相对较大，不适合照片场景。

• WebP/AVIF

  • 优势：现代格式，既支持有损也支持无损压缩，压缩比比 JPEG/PNG 更高。
  • 劣势：兼容性需检查（H5 端几乎通用，小程序端需看平台基础库支持情况）。

• SVG

  • 优势：矢量图形，无失真、可缩放。
  • 劣势：不适合大面积、复杂渐变的图片，且渲染时可能增加 CPU 负担。

实战建议：

• 照片类：优先使用 WebP（H5/现代小程序）或压缩后的 JPEG。
• 图标/简单 UI 元素：优先使用 SVG 或压缩后的 PNG。
• 对于不支持 WebP 的旧设备，可通过后端或 CDN 动态切换格式。

2.2 分辨率与体积关系

图片分辨率越高、像素越多，体积（KB/MB）越大。通常需要针对不同终端屏幕进行“按需裁剪”：

• H5 端：可以通过 srcset 或 CSS media query 加载合适尺寸；
• 小程序端：常见方式是后端返回时就生成多套分辨率（如 xxx_200x200.jpg、xxx_400x400.jpg），在前端根据设备像素比或视图大小选择。

示例：按需请求不同分辨率的图片

// utils/image.js
export function getOptimizedImgUrl(baseUrl, width, height) {
  // 假设后端支持 ?w= &h= 参数，返回对应尺寸
  return `${baseUrl}?w=${width}&h=${height}`;
}

<template>
  <image
    :src="getOptimizedImg(item.imageUrl, 375, 375)"
    mode="aspectFill"
    width="375"
    height="375"
  />
</template>
<script>
import { getOptimizedImgUrl } from '@/utils/image';
export default {
  methods: {
    getOptimizedImg(url, w, h) {
      return getOptimizedImgUrl(url, w * uni.getSystemInfoSync().pixelRatio, h * uni.getSystemInfoSync().pixelRatio);
    }
  }
};
</script>

三、懒加载策略

3.1 原生 <image lazy-load> （小程序与 uniapp）

在 uniapp 中，无论是微信小程序、支付宝小程序，还是 H5 模式，都可以直接在 <image> 上加 lazy-load="true"，让图片仅在进入视口时才加载。

<template>
  <scroll-view scroll-y style="height:100vh;">
    <view v-for="(item, index) in list" :key="index" class="item">
      <image
        :src="item.src"
        mode="aspectFill"
        lazy-load="true"
        class="thumb"
      />
      <text>{{ item.title }}</text>
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      list: Array.from({ length: 100 }).map((_, i) => ({
        src: `https://cdn.example.com/images/${i}.jpg`,
        title: `图片 ${i}`
      }))
    };
  }
};
</script>

<style>
.item {
  display: flex;
  align-items: center;
  padding: 10px;
}
.thumb {
  width: 80px;
  height: 80px;
  margin-right: 10px;
  background: #f0f0f0;
}
</style>

• 作用：当图片节点滚动到可视区附近时才发起请求，避免第一屏外的图片全部加载。

• 支持平台：

  • 微信小程序/支付宝小程序/百度小程序：内置支持，直接加 lazy-load 属性。
  • H5：uniapp 会在 H5 模式下将其自动转换为 Intersection Observer（浏览器兼容性需考虑：IE 不支持，需要 polyfill 或手动实现）。
• 注意：小程序端的 lazy-load 并不保证“图片进入屏幕立刻加载”，而是“小程序视口内一定范围”内预加载。

3.2 自定义懒加载指令（增强版）

对于更细粒度控制（例如：H5 使用 Intersection Observer，兼容性更优；或者在小程序端希望自定义预加载偏移距离），可以自己封装一个指令。

// directives/lazyload.js
export default {
  mounted(el, binding) {
    // binding.value 为图片真实地址
    const imgSrc = binding.value;
    const placeholder = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQ…'; // 1x1 透明图
    el.src = placeholder;

    function loadImage() {
      el.src = imgSrc;
      observer.unobserve(el);
    }

    if ('IntersectionObserver' in window) {
      const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            loadImage();
          }
        });
      }, {
        rootMargin: '100px' // 提前100px开始加载
      });
      observer.observe(el);
      el._io = observer;
    } else {
      // 兜底：浏览器不支持 IntersectionObserver，直接加载
      loadImage();
    }
  },
  unmounted(el) {
    if (el._io) {
      el._io.unobserve(el);
      delete el._io;
    }
  }
};

// main.js
import { createSSRApp } from 'vue';
import App from './App.vue';
import lazyload from '@/directives/lazyload';

export function createApp() {
  const app = createSSRApp(App);
  app.directive('lazy', lazyload);
  return { app };
}

<template>
  <scroll-view scroll-y style="height:100vh;">
    <view v-for="(item, index) in list" :key="index" class="item">
      <img v-lazy="item.src" class="thumb" />
      <text>{{ item.title }}</text>
    </view>
  </scroll-view>
</template>

• 原理：利用浏览器的 IntersectionObserver API，当图片元素进入可视区（或一定偏移范围内）时再将 src 设置为真实地址。
• 优势：可自定义 rootMargin 参数，实现“提前加载”或“延后加载”的策略；对 H5 端性能更友好。
• 兼容性：在不支持 IntersectionObserver 的环境下自动回退为“直接加载”。

四、占位图与渐进加载

4.1 占位图（Placeholder）

当图片尺寸较大或者网络较慢时，直接空白等待会影响用户体验。占位图（低分辨率预览图、纯色背景或骨架屏）可以在图片加载过程中保持页面布局稳定。

4.1.1 简单纯色背景占位

<template>
  <view class="image-wrapper">
    <image
      :src="imgSrc"
      mode="aspectFill"
      @load="onImageLoad"
      class="real"
      v-show="loaded"
    />
    <view v-show="!loaded" class="placeholder"></view>
  </view>
</template>

<script>
export default {
  props: ['imgSrc'],
  data() {
    return {
      loaded: false
    };
  },
  methods: {
    onImageLoad() {
      this.loaded = true;
    }
  }
};
</script>

<style scoped>
.image-wrapper {
  position: relative;
  width: 100%;
  /* 高度可根据需求设置或根据宽高比动态计算 */
  padding-top: 56.25%; /* 16:9 比例 */
}
.placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f0f0f0;
}
.real {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

• 思路：先渲染一个灰色 placeholder（或加载动画），等到 @load 事件触发后再显示真实图。
• 优点：在图片未下载完成前，页面布局已占位，不会出现跳动。
• 缺点：如果网络极慢，占位图会一直存在，建议在数秒后显示“加载失败”提示。

4.1.2 低分辨率预览图（LQIP）

对于大尺寸图片，可以先加载一个极小分辨率的 Base64 模糊图，等到真正的高清图下载完成后再替换。示例：

<template>
  <view class="image-wrapper">
    <image
      :src="lowRes"
      mode="aspectFill"
      class="low"
      v-show="!highLoaded"
    />
    <image
      :src="highRes"
      mode="aspectFill"
      @load="onHighLoad"
      class="high"
      v-show="highLoaded"
    />
  </view>
</template>

<script>
export default {
  props: {
    lowRes: String,   // 低分模糊图 Base64
    highRes: String   // 高分真图 URL
  },
  data() {
    return {
      highLoaded: false
    };
  },
  methods: {
    onHighLoad() {
      this.highLoaded = true;
    }
  }
};
</script>

<style scoped>
.image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 75%; /* 比如 4:3 比例 */
}
.low, .high {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease;
}
.low {
  filter: blur(10px);
  transform: scale(1.1);
}
.high {
  opacity: 0;
}
.high[v-show="true"] {
  opacity: 1;
}
</style>

• 实现细节：

  1. lowRes：一张通过裁剪+高斯模糊后压缩到极小尺寸（宽高 ≤ 20px）的 Base64 图，文件体积只有几十 B，可几乎瞬间渲染。
  2. 高分图片加载完成后，将其 opacity 从 0 平滑过渡到 1，同时 lowRes 通过 v-show 隐藏。
  3. filter: blur(10px)＋scale(1.1) 可以让低分图看起来更模糊、更自然，降低用户感知的跳跃。

ASCII 图解：LQIP 渐进加载流程

┌───────────────────────────────┐
│ 1. 渲染 lowRes Base64 模糊图    │
└───────────────────────────────┘
               ↓
┌───────────────────────────────┐
│ 2. 发起 highRes 真图网络请求    │
└───────────────────────────────┘
               ↓
┌───────────────────────────────┐
│ 3. highRes 资源下载完成       │
└───────────────────────────────┘
               ↓
┌───────────────────────────────┐
│ 4. highRes 图渐变显示（opacity）│
└───────────────────────────────┘
               ↓
┌───────────────────────────────┐
│ 5. 隐藏 lowRes 图，完成切换    │
└───────────────────────────────┘

4.2 骨架屏（Skeleton Screen）

骨架屏相比于占位图更具可视布局感，常配合列表使用，让用户在等待图片加载时看到“灰色块+进度条”模拟内容结构，减少等待焦虑。

<template>
  <view class="item">
    <view v-if="!loaded" class="skeleton">
      <view class="thumb-skeleton"></view>
      <view class="text-skeleton"></view>
    </view>
    <view v-else class="content">
      <image
        :src="src"
        mode="aspectFill"
        @load="onLoad"
        class="thumb"
      />
      <text>{{ title }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: ['src', 'title'],
  data() {
    return { loaded: false };
  },
  methods: {
    onLoad() {
      this.loaded = true;
    }
  }
};
</script>

<style scoped>
.item {
  display: flex;
  align-items: center;
  padding: 10px;
}
.skeleton {
  display: flex;
  align-items: center;
  width: 100%;
}
.thumb-skeleton {
  width: 80px;
  height: 80px;
  background: #ececec;
  border-radius: 8px;
  animation: pulse 1.5s infinite;
  margin-right: 10px;
}
.text-skeleton {
  width: 60%;
  height: 20px;
  background: #ececec;
  border-radius: 4px;
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0% { background-color: #ececec; }
  50% { background-color: #f5f5f5; }
  100% { background-color: #ececec; }
}
.content .thumb {
  width: 80px;
  height: 80px;
  margin-right: 10px;
}
</style>

• 原理：在图片加载前先渲染灰色动画块，加载完成后再显示真实内容。
• 优势：骨架屏更能让用户感知到页面结构而不是空白，提升视觉体验。
• 注意：不要对所有 item 都使用骨架屏，否则初次渲染时也会带来相当多的 DOM 开销。建议配合懒加载，只对出现在视口附近的列表项渲染骨架。

五、缓存与离线存储

5.1 小程序端图片缓存机制

• 微信小程序：框架会自动缓存一定次数的 image 资源到本地，在下次加载时若未超过缓存上限则直接读取本地缓存，节省网络请求。缓存上限一般为 10MB 左右，基于 LRU（最近最少使用）策略自动清理。
• 支付宝小程序 / 百度小程序：同样也会缓存静态资源，但具体限制与策略略有不同，需要参考各自官方文档。

结论：对同一个 src URL，尽量保持一致，不要动态拼接无意义的 query 参数，否则会造成缓存失效。

5.2 H5 端缓存与 Service Worker

在 H5 模式下，我们可以使用Service Worker或Cache-Control头来缓存图片：

// public/service-worker.js (以 Workbox 为例，需在 vue.config.js 中配置)
workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);

// 缓存图片请求
workbox.routing.registerRoute(
  /\.(?:png|jpg|jpeg|svg|webp)$/,
  new workbox.strategies.CacheFirst({
    cacheName: 'images-cache',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 50,       // 最多缓存 50 张
        maxAgeSeconds: 30 * 24 * 3600, // 缓存一个月
      }),
    ],
  })
);

注意：如果你使用 uniapp CLI 模式打包 H5，需要在 vue.config.js 中启用 PWA 插件来挂载 Service Worker。

5.3 本地下载并使用临时文件（小程序）

对于需要离线使用的多张大图（如游览图、漫画等），可在首次启动时使用 uni.downloadFile 批量下载到本地缓存目录，再通过 fs.readFile / fs.saveFile 将其永久化（最大 10MB 左右，平台不同差异较大）。

methods: {
  async preloadImages(urlList) {
    const fs = uni.getFileSystemManager();
    const savedPaths = [];
    for (const url of urlList) {
      try {
        const res = await uni.downloadFile({ url });
        if (res.statusCode === 200) {
          // 将临时文件保存到用户目录
          const saved = await fs.saveFile({
            tempFilePath: res.tempFilePath,
            filePath: `${wx.env.USER_DATA_PATH}/${this.getFileName(url)}`
          });
          savedPaths.push(saved.savedFilePath);
        }
      } catch (e) {
        console.error('下载失败：', url, e);
      }
    }
    return savedPaths;
  },
  getFileName(url) {
    return url.split('/').pop();
  }
}

• saveFile：会将临时路径里的文件移动到 USER_DATA_PATH 下，并返回一个永久路径，可在下次启动或离线使用。
• 清理缓存：需要定期检查 USER_DATA_PATH 文件总大小，超过一定阈值时调用 fs.unlink 删除过期资源。

六、属性与 CSS 优化

6.1 <image> 常用属性

在 uniapp 中，<image> 组件支持多个优化属性：

• mode

  • aspectFill：保持纵横比缩放图片，使图片充满宽高，可能裁剪。
  • widthFix：固定宽度，按图片宽高比缩放高度。
  • aspectFit：保持纵横比缩放图片，使图片全部显示，可能留白。
  • center、top、bottom、left、right：不缩放，居中或对齐。
  • 优化建议：根据布局场景选择合适的 mode，避免过度缩放和裁剪导致的重绘。

• lazy-load

  • 已前文介绍，可在小程序端和 uniapp H5 自动支持。

• webp（微信小程序）

  • image webp="true"：微信小程序特有属性，优先加载 .webp 格式，如果服务器上有同名 .webp 文件则自动使用，降低体积。

<image 
  src="https://cdn.example.com/images/pic.jpg" 
  mode="aspectFill"
  webp="true"
  class="thumb"
/>

• decode 回调（H5 端）

  • <img :src="..." @load="onLoad" @error="onError" ref="img" /> 可监听 onload / onerror 事件，提前做占位隐藏或错误提示。

6.2 CSS 尺寸声明与布局

• 提前声明宽高
  为防止“未加载”时页面布局抖动，尽量在 CSS 或标签上提前声明 width、height 或者使用定宽定高容器。

  <view class="thumb-wrapper">
    <image src="..." mode="aspectFill" class="thumb" />
  </view>

  .thumb-wrapper {
    width: 100%;
    padding-top: 56.25%; /* 16:9 比例固定高度 */
    position: relative;
  }
  .thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

• 使用 Flex 布局或 Grid 布局
  让图片在父容器里自适应拉伸或等比缩放，减少对 auoHeight 等动态计算属性的依赖。
• 避免“重排/回流”
  在 <scroll-view> 或列表中，尽量减少 <image> 在 @scroll 回调里动态修改 style（如动态改变 height、width），因为这会频繁触发重排。可利用批量更新、CSS 过渡来平滑处理。

七、CDN 与压缩策略

7.1 CDN 分发

• 使用 CDN 加速：将所有静态资源（图片、视频、脚本等）上传到 CDN（如阿里云 OSS、腾讯云 COS、七牛云等），加速全球访问。
• 配置缓存头：在 CDN 控制台设置 Cache-Control: max-age=31536000, immutable，令图片资源长期缓存。发布新版本时可使用“文件指纹”（如 xxx.abc123.jpg）避免缓存风险。

7.2 图片压缩与格式转换

• 构建时压缩：在本地或 CI 环境中使用工具（如 ImageOptim、TinyPNG 、imagemin 插件）批量压缩 PNG/JPEG。
• 动态压缩与格式转换：后端或 CDN 端支持一键转换：如 https://cdn.example.com/pic.jpg?x-oss-process=image/format,webp/quality,q_75，直接返回 WebP 75% 压缩图。

• 使用 WebP/AVIF：

  • H5 端：检测浏览器支持，优先请求 WebP；示例：

    function getBestFormatUrl(url) {
      const ua = navigator.userAgent;
      if (ua.includes('Chrome') || ua.includes('Firefox')) {
        return url.replace(/\.(jpe?g|png)$/, '.webp');
      }
      return url;
    }

  • 小程序端：微信小程序支持 webp="true" 属性；其他平台需后端配合。

八、分包与分离加载

8.1 小程序分包

当一个页面含有大量图片、或需要加载很多静态资源时，可将其放在子包中，让主包体积保持在 2MB 以内，加快冷启动速度。

// pages.json
{
  "pages": [
    {
      "path": "pages/home/home",
      "style": { "navigationBarTitleText": "首页" }
    }
  ],
  "subPackages": [
    {
      "root": "pages/photo",  // 分包根目录
      "pages": [
        {
          "path": "photo-list/photo-list",
          "style": { "navigationBarTitleText": "照片列表" }
        },
        {
          "path": "photo-detail/photo-detail",
          "style": { "navigationBarTitleText": "照片详情" }
        }
      ]
    }
  ]
}

• 如何访问分包资源：在 photo-list 页面中引入图片时，不要使用 ../../static/...，而是相对子包根目录：

  <image src="/static/photos/thumb1.jpg" />

• 分包异步加载：当用户点击“照片”tab 时才加载该分包及其图片资源，避免首包体积过大。

8.2 H5 动态分片加载

• 动态导入（code-splitting）：通过 uniapp CLI 模式，可把图片列表页的依赖拆分到单独的 chunk，当路由切换到该页面时再加载。
• 懒加载资源包：在 pages.json 中可为 H5 使用 subPackages，或在 vue.component 中使用 defineAsyncComponent。

九、实战示例：商品列表页优化前后对比

下面用一个商品列表页的完整示例，展示优化前后在加载性能上的差异。假设我们有一个 100 项图片列表，展示用户购物车或商品缩略图。

9.1 优化前示例（所有图片一次请求）

<template>
  <view>
    <scroll-view scroll-y style="height: 100vh;">
      <view v-for="(item, index) in list" :key="index" class="item">
        <image :src="item.src" mode="aspectFill" class="thumb" />
        <text>{{ item.title }}</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: Array.from({ length: 100 }).map((_, i) => ({
        src: `https://cdn.example.com/products/${i}.jpg`,
        title: `商品 ${i}`
      }))
    };
  }
};
</script>

<style>
.item {
  display: flex;
  align-items: center;
  padding: 10px;
}
.thumb {
  width: 80px;
  height: 80px;
  margin-right: 10px;
  background: #f0f0f0;
}
</style>

性能问题

• 页面刚渲染时会一次性请求 100 张图片，网络压力大、首屏白屏时间长；
• 滑动时，所有图片都在同时加载，导致卡顿；
• 体积大，首次加载消耗过多流量。

9.2 优化后示例（懒加载 + 占位图 + CDN + 格式转换）

<template>
  <view>
    <scroll-view scroll-y style="height: 100vh;">
      <view v-for="(item, index) in list" :key="index" class="item">
        <!-- 加载占位图且懒加载 -->
        <image
          v-lazy="getOptimizedImg(item.src, 80, 80)"
          class="thumb"
        />
        <text>{{ item.title }}</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { getOptimizedImgUrl } from '@/utils/image';
// 自定义懒加载指令已在 main.js 中注册 v-lazy

export default {
  data() {
    return {
      list: Array.from({ length: 100 }).map((_, i) => ({
        src: `https://cdn.example.com/products/${i}.jpg`,
        title: `商品 ${i}`
      }))
    };
  },
  methods: {
    getOptimizedImg(url, w, h) {
      // 1. 使用 CDN 动态裁剪（宽高对应 @2x or @3x 可自行根据 pixelRatio 传入）
      const qr = getOptimizedImgUrl(url, w * uni.getSystemInfoSync().pixelRatio, h * uni.getSystemInfoSync().pixelRatio);
      // 2. 如果支持 WebP，则优先换成 .webp
      if (uni.canIUse('image.webp')) {
        return qr.replace(/\.(jpe?g|png)$/, '.webp');
      }
      return qr;
    }
  }
};
</script>

<style>
.item {
  display: flex;
  align-items: center;
  padding: 10px;
}
.thumb {
  width: 80px;
  height: 80px;
  margin-right: 10px;
  background: #f0f0f0;
  border-radius: 4px;
}
</style>

关键优化点

1. 懒加载指令 v-lazy

   • 只有滚动到“视口附近”的图片才会加载，减少网络并发。
   • 每次滑动时自动销毁不可见图片的请求，有效控制带宽占用。

2. 占位图与骨架色

   • 在 .thumb 样式中设置 background: #f0f0f0，当图片还未 src 切换为真实 URL 前，先显示灰色方块。
   • 可以进一步用低分辨模糊图替换灰色固态背景，视觉更平滑。

3. CDN 动态裁剪

   • 使用 getOptimizedImgUrl(url, width, height) 拼接后端或 CDN 支持的动态裁剪参数，避免客户端再拉原图再缩放。
   • 根据设备 pixelRatio 传入合适的尺寸，保证高清同时减少冗余像素。

4. WebP 格式优先

   • 通过 uni.canIUse('image.webp') 判断小程序/浏览器是否支持 WebP，优先使用 .webp 格式，进一步降低体积。

5. 去除多余请求

   • 由于每个列表项只有一个 <image>，滑出视口时如果未加载完成的会被取消（Intersection Observer 自动取消），不再浪费流量。

ASCII 图解：优化后懒加载流程

┌────────────────────────────────────┐
│  1. 页面渲染100个“灰色占位块”     │
│     <scroll-view> → 100个<div>     │
│     <img v-lazy src=占位图>       │
└────────────────────────────────────┘
                  ↓
┌────────────────────────────────────┐
│  2. IntersectionObserver 监听可视区  │
│     只对视口附近5个图片调用 load   │
└────────────────────────────────────┘
                  ↓
┌────────────────────────────────────┐
│  3. 请求小图 CDN → 获取 WebP/JPEG   │
│     ≤ 80x80×pixelRatio，下载=~5KB    │
│     视口外图片不发起请求             │
└────────────────────────────────────┘
                  ↓
┌────────────────────────────────────┐
│  4. 滑动产生位移视口下移 → Observer  │
│     自动取消上一个未完成的请求      │
│     并对新进入可视区的图片发起请求  │
└────────────────────────────────────┘

优化后效果对比：

• 首屏白屏时间：由原本全部 100 张并发请求，缩减为仅 8 张（视口大小决定）同时请求。
• 滑动卡顿：由于网络请求被限制，滑动时不会有大量请求导致的掉帧。
• 流量节省：仅针对可视区提前加载，按需加载，省去 90 张图片不必要的请求。

十、H5 与小程序差异注意

虽然 uniapp 提供了跨端一致的 <image lazy-load> 方案，但在不同平台使用时，有些细节需要注意：

1. 微信小程序

   • lazy-load 已内置，不支持 IntersectionObserver，而使用“小程序自身优化”方式，无法自定义rootMargin。
   • WebP：微信小程序对 webp="true" 支持较好，可直接声明。

2. 支付宝小程序

   • lazy-load 在低版本基础库可能不生效，需要对 scroll-view 加上 enable-back-to-top="false" 等属性防止滚动异常。
   • 部分老设备对大尺寸 WebP 支持不好，可在 getOptimizedImg 中判断 UA，再回退到 JPEG。

3. H5（浏览器）

   • H5 模式下的 <image> 本质上是 <img> 标签，lazy-load 会被 uniapp 转换为自定义指令实现（基于 Intersection Observer）。如果需要兼容低版本浏览器（IE11），需额外引入 polyfill。
   • H5 可在 vue.config.js 中开启 PWA 功能，让图片通过 Service Worker 缓存。

4. 原生 APP（uniapp App-Plus）

   • <image lazy-load> 在 App-Plus 端也会自动生效，底层调用系统原生拉流方式。
   • 可结合 plus.io 接口将下载完的图缓存到本地，避免重复下载。

十一、常见问题与解答

1. Q：lazy-load 不起作用，图片依然提前加载？

   • A：检查是否使用了 <scroll-view> 而未设置 scrollY 或者 @scroll 事件阻塞了默认。确保 scroll-view scroll-y 正常使用；或者高版本小程序的 lazy-load 机制与 scroll-view 配合有些差异，可尝试切换为 page 自带滚动条。

2. Q：为什么在 H5 下 lazy-load 会同时发起所有图片请求？

   • A：H5 端需要浏览器支持 IntersectionObserver，若不支持会回退到“立即加载”。请确保你的开发环境或目标浏览器支持该 API，或者引入 polyfill。另外，uniapp 在 H5 模式下会把lazy-load 转为指令，只支持 uniapp CLI 模式，需要在 vue.config.js 中启用相关转换。

3. Q：如何控制“滑动时暂停加载图片”？

   • A：在 IntersectionObserver 设置中，我们可以通过 rootMargin 和 threshold 控制触发加载的区域。如果想进一步优化可在滑动时手动调用 observer.unobserve(el) 暂停加载，滑动结束后再 observe(el)。

4. Q：大图（如用户上传的 4K 照片）该如何处理？

   • A：推荐后端在接收到原始大图时就进行压缩和裁剪，生成几个不同分辨率的缩略图。对于用户展示，使用 800×600 或 1024×768 的版本即可。避免前端拉取 4K 大图再做缩放，浪费带宽和 CPU。

5. Q：同一张图片在不同页面使用，如何避免多次请求？

   • A：小程序端对相同 URL 会自动缓存。H5 端可以使用浏览器 Cache、Service Worker 或父级 <head> 中加上 <link rel="preload">，让浏览器提前缓存资源。

6. Q：动态路由时，图片路径加了时间戳后缓存失效怎么办？

   • A：只有在更新图片后（比如发布新版本）才需要使用”文件指纹“或时间戳，通过后端接口统一管理版本号。生产环境尽量避免每次都拼 ?t=${Date.now()}，否则会让缓存失效，丧失优化意义。

十二、总结

本文从基础知识、懒加载、占位图/骨架屏、缓存与离线、属性/CSS 优化、CDN 与压缩、分包等多个维度，系统地阐述了在 uniapp 项目中做图片加载性能优化的实战策略，并通过多个代码示例与ASCII 图解帮助你快速上手。关键精华包括：

1. 懒加载：在 <image> 上使用 lazy-load="true" 或自定义 v-lazy 指令，避免一次性并发请求大量图片。
2. 占位图与渐进加载：在图片加载过程中显示占位或低分辨率模糊图，减轻白屏与布局抖动。
3. 缓存与离线存储：利用小程序缓存机制、uni.downloadFile 与 fs.saveFile 下载并持久化图片；H5 端依赖 Service Worker 缓存。
4. 属性与 CSS：合理设置 mode、width、height，提前确定容器大小，避免重排。
5. CDN 与格式压缩：通过 CDN 动态裁剪、使用 WebP/AVIF 格式降低图片体积，并配置长缓存。
6. 分包与分离加载：对于小程序端，将图片较多的页面拆到子包；H5 可借助 Code-Splitting 按需加载。