小程序远程图片资源按需预加载

最新推荐文章于 2021-05-10 20:06:37 发布

极乐叔

最新推荐文章于 2021-05-10 20:06:37 发布

阅读量3.8k

点赞数 2

分类专栏：微信小程序

本文链接：https://blog.csdn.net/rolan1993/article/details/82384431

版权

本文介绍了如何在小程序中实现按需预加载远程图片资源，以解决页面打开时大图加载慢的问题。通过使用小程序API读取远程图片，创建ImageLoader管理器，详细讲解了配置和使用方法，包括图片资源路径文件的创建、加载器源码，以及在不同场景下的应用。同时，文章提到了预加载图片会被微信缓存，以优化启动体验。

摘要由CSDN通过智能技术生成

最近做H5开发遇到个问题，为了防止页面打开时，出现大图加载缓慢的情况，写了一个图片资源管理器，今天顺便实现了一下小程序版。

特别说明一下，小程序由于资源包大小限制，很多图片资源会存放到CND图片服务器上，为了实现小程序初始化时按需加载远程图片资源，实现了以下加载器，希望能解决部分小程序新人开发者预加载图片的苦恼。

特别强调：

本加载器为初级版本，暂未研究其他实现方式，当前实现方式需要在微信公众平台->设置->downloadFile合法域名，中添加想要加载的图片所在服务器合法域名。

原理介绍：

使用小程序自带API读取远程图片资源：

wx.getImageInfo({
 src: 'images/a.jpg',
 success: function (res) {
 console.log(res.width)
 console.log(res.height)
 }
})

这个接口可以创建图片组件对象并返回图片加载状态。

加载器用法：

1、在app.js的同级目录下创建一个ImageSource.js作为图片资源的路径管理文件（可以根据情况改为其他文件名称）。

2、在utils文件夹下放入ImageLoader.js或ImageLoader.min.js（附件）。

3、根据需要在对应的文件中创建ImageLoader对象（看下文）。

使用示例：

1、载入文件：

const ImageLoader = require('./utils/ImageLoader.min.js');
const ImageSource = require('./imageSource.js');

ImageLoader.min.js 为加载器源文件。

imageSource.js 为图片资源路径文件。

2、创建ImageLoader对象。

new ImageLoader({
 base: ImageSource.BASE,
 source: [ImageSource],
 loading: res => {
 // 可以做进度条动画
 console.log(res);
 },
 loaded: res => {
 // 可以加载完毕动画
 console.log(res);
 }
 });

参数

base : String 图片资源的基础路径必填示例： "https://image.example.com/static/images/"

source : Array 需要预加载的图片资源必填示例：