本篇文章给大家带来的内容是关于小程序加载器的实现：按需预加载远程图片资源，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
最近做h5开发遇到个问题，为了防止页面打开时，出现大图加载缓慢的源码网点我wcqh.cn情况，写了一个图片资源管理器，今天顺便实现了一下小程序版。
特别说明一下，小程序由于资源包大小限制，很多图片资源会存放到CND图片服务器上，为了实现小程序初始化时按需加载远程图片资源，实现了以下加载器，源码网点我wcqh.cn希望能解决部分小程序新人开发者预加载图片的苦恼。
特别强调：
本加载器为初级版本，暂未研究其他实现方式，当前实现方式需要在微信公众平台->设置->downloadFile合法域名，中添加想要加载的图片所在源码网点我wcqh.cn服务器合法域名。
原理介绍：
使用小程序自带API读取远程图片资源：
1
2
3
4
5
6
7
wx.getImageInfo({
src: 'images/a.jpg',
success: functio源码网点我wcqh.cnn (res) {
console.log(res.width)
console.log(res.height)
}
})
这个接口可以创建图片组件对象并返回图片加载状态。
加载器用法：
1、在app.j源码网点我wcqh.cns的同级目录下创建一个ImageSource.js作为图片资源的路径管理文件（可以根据情况改为其他文件名称）。
2、在utils文件夹下放入ImageLoader.js或ImageLoader.min.源码网点我wcqh.cnjs（附件）。
3、根据需要在对应的文件中创建ImageLoader对象（看下文）。
使用示例：
1、载入文件：
1
2
const ImageLoader = require('./utils/Imag源码网点我wcqh.cneLoader.min.js');
const ImageSource = require('./imageSource.js');
ImageLoader.min.js源码网点我wcqh.cn 为加载器源文件。
imageSource.js 为图片资源路径文件。
2、创建ImageLoader对象。
1
2
3
4
5
6
7
8
9
10
11
12
new ImageLoader({
base: ImageSourc源码网点我wcqh.cne.BASE,
source: [ImageSource],
loading: res => {
// 可以做进度条动画
console.log(res);
},
loaded: res => {
// 可以加载完源码网点我wcqh.cn毕动画
console.log(res);
}
});
参数
base : String 图片资源的基础路径 必填 示例： “https://image.example.com/static/imag源码网点我wcqh.cnes/”
source : Array 需要预加载的图片资源 必填 示例： [ImageSource.banners, ImageSource.imageList]
loading : function 源码网点我wcqh.cn图片加载中的回调方法 非必填 示例：
loaded : funciton 图片记载完成后的回调 非必填 示例:
加载器（ImageLoader.js）源码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
11源码网点我wcqh.cn1
112
113
let base = 0;
let Img = function(src) {
this.src = src;
this.status = false;
this.fail = false;
}
l源码网点我wcqh.cnet loop = (o, res) => {
let tem = Object.keys(o);
tem.map(v => {
if (typeof o[v] === 'object') 源码网点我wcqh.cn{
loop(o[v], res);
} else {
if(v === 'BASE') {
base = o[v];
} else {
res.push(o[v]);
}
}
});
}
function源码网点我wcqh.cn ImageLoader(obj) {
let arr = []; if(obj.loading) {
this.loadingcallback = obj.loading;
}
if(obj.loaded源码网点我wcqh.cn) {
this.loadedcallback = obj.loaded;
}
if(obj.base) {
base = obj.base
}
this.insert = (item) => {
arr.push源码网点我wcqh.cn(item);
};
this.init = (o) => {
let res = [];
loop(o, res);
console.log(res)
res.map((v) => {
this.insert(n源码网点我wcqh.cnew Img(v));
});
this.load();
};
this.load = () => {
this.start = (new Date).getTime();
arr.map((v) => {
let源码网点我wcqh.cn src = base ? base + v.src: v.src;
wx.getImageInfo({
src: src,
success: res => {
v.status = true;
},
fail:源码网点我wcqh.cn err => {
v.fail = true;
}
})
});
let timer = setInterval(() => {
let status = this.isLoaded();
if (status)源码网点我wcqh.cn {
clearTimeout(timer);
}
}, 200);
setTimeout(() => {
clearTimeout(timer);
}, 60000);
};
this.isLoaded = () 源码网点我wcqh.cn=> {
let status = true,
count = 0,
fail = 0;
arr.map((v) => {
if (!v.status) {
status = false;
} else {
coun源码网点我wcqh.cnt += 1;
}
if(v.fail) {
status = true;
fail += 1;
}
});
if(status) {
if(this.loadedcallback) {
this.loadedcall源码网点我wcqh.cnback({
status: true,
timecost: (new Date).getTime() – this.start,
success: count,
fail: fail,
totalcount:源码网点我wcqh.cn arr.length
})
}
} else {
if(this.loadingcallback) {
this.loadingcallback({
status: false,
percent: count /源码网点我wcqh.cn arr.length
});
}
}
return status;
};
if(obj.source) {
this.init(obj.source);
}
}
module.exports = ImageLoader源码网点我wcqh.cn
图片资源路径文件（imageSource.js）源码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
module.exports 源码网点我wcqh.cn= {
“BASE”: “https://img.caibeitv.com/static_project/teacherTest/static/img/”,
“single1”: “ghost.4449a源码网点我wcqh.cna4.png”,
“single2”: “ghost.4449aa4.png”,
“single3”: “ghost.4449aa4.png”,
“single4”: “ghost.4449aa4.png”源码网点我wcqh.cn,
“pages”: {
“index”: [“ghost.4449aa4.png”, “ghost.4449aa4.png”],
“user”: [“ghost.4449aa4.png”, “ghost.源码网点我wcqh.cn4449aa4.png”],
“home”: [“ghost.4449aa4.png”, “ghost.4449aa4.png”],
“login”: [“ghost.4449aa4.png”, “gho源码网点我wcqh.cnst.4449aa4.png”]
},
“imageList”: [
“ghost.4449aa4.png”,
“ghost.4449aa4.png”,
“ghost.4449aa4.png”,
“ghost.4源码网点我wcqh.cn449aa4.png”,
“ghost.4449aa4.png”
],
“folders”: {
“page1”: “ghost.4449aa4.png”,
“page2”: “ghost.4449aa4.pn源码网点我wcqh.cng”,
“inner”: [
“ghost.4449aa4.png”,
“ghost.4449aa4.png”
],
“home”: {
“poster”: “ghost.4449aa4.png”
}
}
}
说明：
BASE 字段必填 根据自我需要填写。
其他图片资源支持：
1、直接key：value形式把图片路径写入，如：
1
“single1”: “ghost.4449aa4.png”
2、类似于pag源码网点我wcqh.cnes目录把每个页面的远程资源写入到对应位置下，方便引用和管理，如：
1
2
3
4
5
6
“pages”: {
“index”: [“ghost.4449aa4.png”, “ghost.4449aa4.png”]源码网点我wcqh.cn,
“user”: [“ghost.4449aa4.png”, “ghost.4449aa4.png”],
“home”: [“ghost.4449aa4.png”, “ghost.4449aa4.png源码网点我wcqh.cn“],
“login”: [“ghost.4449aa4.png”, “ghost.4449aa4.png”]
},
3、直接以数组方式把图片堆放在一个数组里，如：
1
2
3
4
5
6
7
“imageLis源码网点我wcqh.cnt”: [
“ghost.4449aa4.png”,
“ghost.4449aa4.png”,
“ghost.4449aa4.png”,
“ghost.4449aa4.png”,
“ghost.4449aa4.源码网点我wcqh.cnpng”
]
4、随意的资源数组，对象嵌套，如：
1
2
3
4
5
6
7
8
9
10
11
“folders”: {
“page1”: “ghost.4449aa4.png”,
“page2”: “ghost.444源码网点我wcqh.cn9aa4.png”,
“inner”: [
“ghost.4449aa4.png”,
“ghost.4449aa4.png”
],
“home”: {
“poster”: “ghost.4449aa4.png”
}
这样就完成了整个远程图片资源加载器的配置，可以在new ImageLoader() 对象的 loading, loaded回调中看到图片预加载的最终状态status，数量totalcoun源码网点我wcqh.cnt，成功加载的图片数量success，加载失败的图片数量fail, 加载图片的总计耗时timecost（单位ms）。
创建ImageLoader对象时source字段的说明：
1
2
3
4
5
6
7
8
9
10
11
new ImageLoader({
base: ImageSource.BASE,
source: [ImageSource],
loading: res => {
// 可以做进度条动画
console.l源码网点我wcqh.cnog(res);
},
loaded: res => {
// 可以加载完毕动画
console.log(res);
}
});
source字段接受一个Array类型的参数，以上文中imageSourc源码网点我wcqh.cne.js中的配置来说，写了很多不同格式的数据，使用
1
const ImageSource = require('./imageSource.js');
引入后，可以直接使用Ima源码网点我wcqh.cngeSource来读取各个部分的数据，因此在配置source字段时可以直接把整个ImageSource对象放入进去
1
source: [ImageSource]
也可以根据项目需要只加载其中一部源码网点我wcqh.cn分资源，如：
1
source: [ImageSource.imageList, ImageSource.single2]
这样加载器在执行时就会只载入source中写入的部分，而不是整个Imag源码网点我wcqh.cneSource。
最后，在加载过程中如果过于耗时，可以选择在每个页面的onLoad里单独加载资源，做法类似于在app里调用，本文的示例是写在app.js的onLaunch中。如果加载时间过长可以做一个进源码网点我wcqh.cn度条或者加载动画，优化启动体验。预加载过的图片会在微信内存中缓存一到小程序进程被关闭，因此在随后的页面里可以直接使用图片。
1
2
3
4
5
6
7
8
9
10
11
const app = getApp();
const源码网点我wcqh.cn imgSource = require('../../imageSource.js');
Page({
data: {
base: imgSource.BASE,
src: imgSourc源码网点我wcqh.cne.single1
},
onLoad: function () {
console.log(imgSource)
}
})
页面上的Image会立即显示，不需要重新发起加载图片请求。
相关推荐：
JS实现源码网点我wcqh.cn图片预加载无需等待
以上就是小程序加载器的实现：按需预加载远程图片资源的详细内容，更多请关注php中文网其它相关文章！
会员专属
暂无评论内容