uniApp图片加载慢怎么办-猿码集

1. 前言

uniApp是近年来非常流行的一款多端开发框架，可以同时开发小程序、H5、APP等多个平台。然而，在开发过程中，我们可能会遇到一些图片加载缓慢的问题，影响用户体验。本文将介绍一些解决uniApp图片加载慢问题的方法。

2. 常见原因

在解决问题之前，我们需要了解一些导致图片加载慢的常见原因。

2.1 图片过大

如果你的图片尺寸过大，那么加载时间就会过长。具体的解决方法有以下几种：

缩小图片尺寸

通过图片压缩工具压缩图片大小

2.2 网络问题

网络问题也是常见的一个原因，如果用户的网络环境太差，那么可能会导致图片加载速度变慢。此时我们可以通过以下方法解决：

使用图片CDN加速

使用WebP格式替代jpg和png格式

2.3 JS代码问题

如果你的JS代码中存在不合理的逻辑，那么也会导致图片加载缓慢。例如：某张图片需要在用户点击之后才会加载，但是你却在页面初次加载时就加载了该图片。此时我们可以进行如下优化：

对图片进行懒加载，即只有当用户需要时才会加载

预加载，即在页面初次加载时就将全部图片加载好

3. 解决方式

3.1 图片懒加载

图片懒加载，顾名思义，就是将一些需要较长时间才能载入的图片放到一个后台加载中，等到用户需要访问它们时再动态的载入。

uniApp中免费的轮廓（lowPolyImage）组件支持懒加载，只需要将图片的地址放到data中，然后将img标签的src属性替换为:src="lowPolyImage"即可实现图片懒加载。


//HTML
<template>
  <view class="uni-padding-wrap">
    <image v-for="(item,index) in images" :src="lowPolyImage" width="300rpx" style="margin-right:10rpx;margin-bottom:10rpx;" />
  </view>
</template>
//JS
<script>
export default {
  data() {
    return {
      lowPolyImage: '',
      images: [
        'https://img.yzcdn.cn/vant/cat.jpeg',
        'https://img.yzcdn.cn/vant/camel.jpeg',
        'https://img.yzcdn.cn/vant/dolphin.jpeg',
        'https://img.yzcdn.cn/vant/fish.jpeg',
      ]
    };
  },
  mounted() {
    const lowPolyImage = uni.requireNativePlugin('lowPolyImage');
    lowPolyImage.init(
      {
        quality: 30,
        stroke: 3
      },
      (result) => {
        this.lowPolyImage = `lowpolyimage://${result.code}`;
      }
    );
  }
};
</script>

低多边形插件可以实现将图片转换为低多边形图像，节省原图片大小，由于图片小，网络请求速度就会变快，同时，低多边形效果可以为页面增色。

3.2 图片预加载

预先加载图片是指用户在当前页面活跃时，提前将需要使用到的图片加载并缓存，可以加速页面的访问。在uniApp中可以使用uni.request或者uni.downloadFile方法提前将图片下载到本地缓存，再在页面渲染时使用本地缓存。

3.2.1 uni.request方法


//实例代码
//预加载图片到缓存
let imgUrl = 'https://cn.vuejs.org/images/logo.png';
uni.request({
    url: imgUrl,
    method: 'GET',
    responseType:'arraybuffer',
    success: (response) => {
        var imgData = 'data:image/jpeg;base64,' + uni.arrayBufferToBase64(response.data);
        wx.setStorage({
            key:'imgPreload',
            data: imgData
        })
    }
})
//使用图片缓存
<template>
    <image :src="'/storage/emulated/0/Android/data/io.dcloud.h5c6790d5/caches/img/test.png'" />
</template>

3.2.2 uni.downloadFile方法


//实例代码
//预加载图片到缓存
let imgUrl = 'https://cn.vuejs.org/images/logo.png';
uni.downloadFile({
  url:imgUrl,
  success:function(res){
    let path = res.tempFilePath;
    wx.setStorage({
      key:'imgPreload',
      data:path
    });
}
})
//使用图片缓存
<template>
    <image :src="'/storage/emulated/0/Android/data/io.dcloud.h5c6790d5/caches/img/test.png'" />
</template>

使用本地缓存的图片可以提高图片渲染速度，但是缓存的文件会占用本地存储空间，需要注意存储空间的大小。

3.3 图片CDN加速

使用图片CDN加速可以将你的图片资源分发到全球多个加速节点上，让用户就近获取图片资源，减小网络传输时间，提升图片加载速度。在uniApp中使用CDN加速，需要在HBuilderX中配置，在manifest.json文件中配置AppPlus -> crossorigin属性等参数。

//manifest.json文件中配置 "AppPlus": { "name":"uni-app", "version":"1.0.0", "description":"APP打包模板", "type":"ios", "minSdkVersion":"1.0.0", "backgroundMode":"none", "useWebview":true, "titleNView":{ "titleText":"行车轨迹记录" }, "crossorigin":"anonymous",//加入此属性，默认请求会带有referer信息，若业务线要自行处理鉴权，则需要把此属性设置成禁止携带referer "cloud": true }

同时，在上传图片到CDN上之前，我们需要对图片进行压缩，减小图片文件大小，以节省带宽资源。压缩图片可以使用类似TinyPNG或ImageOptim等的在线工具，也可以使用ImageMagick或GraphicsMagick等本地工具进行批量处理。压缩后的图片会降低图片的精确度，但人眼无法区分，不会影响图片的显示效果。

3.4 使用WebP格式

WebP是由Google开发的一种能减少图片文件大小的图片格式，与JPEG和PNG格式相比，WebP格式的图片大小可以缩小25%至35%。在uniApp中，使用WebP格式的图片可以通过以下方式实现。

使用Image Processor插件实现WebP格式的图片处理。

使用自定义构建的方式，通过vue-cli-plugin-uni-optimize压缩图片，减小文件大小。

4. 总结

在开发过程中，为了提高用户体验，我们需要关注图片加载速度。通过合理地使用懒加载、预加载、CDN加速以及WebP格式，可以有效地提高图片加载速度，从而提升应用的性能和用户满意度。

uniApp图片加载慢怎么办