介绍
这篇文章主要介绍了小程序加载器实现按需预加载远程图片资源的示例,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
最近做H5开发遇到个问题,为了防止页面打开时,出现大图加载缓慢的情况,写了一个图片资源管理器,今天顺便实现了一下小程序版。
特别说明一下,小程序由于资源包大小限制,很多图片资源会存放到CND图片服务器上,为了实现小程序初始化时按需加载远程图片资源,实现了以下加载器,希望能解决部分小程序新人开发者预加载图片的苦恼。
<强>特别强调:
本加载器为初级版本,暂未研究其他实现方式,当前实现方式需要在<强>微信公众平台→<强>设置→<强> downloadFile合法域名强,中添加想要加载的图片所在服务器合法域名。
<强>原理介绍:
使用小程序自带API读取远程图片资源:
wx.getImageInfo ({
,src: & # 39;图像/a.jpg& # 39;
,成功:function (res), {
,console.log (res.width)
,console.log (res.height)
,}
}) 这个接口可以创建图片组件对象并返回图片加载状态。
<强>加载器用法:
1,在app.js的同级目录下创建一个ImageSource.js作为图片资源的路径管理文件(可以根据情况改为其他文件名称).
2,在跑龙套文件夹下放入ImageLoader.js或ImageLoader.min。js(附件).
3,根据需要在对应的文件中创建ImageLoader对象(看下文)。
使用示例:
1,载入文件:
const ImageLoader =,要求(& # 39;。/跑龙套ImageLoader.min.js& # 39;);
const ImageSource =,要求(& # 39;。/imageSource.js& # 39;); ImageLoader.min。js为加载器源文件。
imageSource。js为图片资源路径文件。
2,创建ImageLoader对象。
new ImageLoader ({
,基础:ImageSource.BASE,
来源:大敌;[ImageSource],
,加载:res =祝辞,{
,//可以做进度条动画
,console.log (res);
},
,加载:res =祝辞,{
,//可以加载完毕动画
,console.log (res);
,}
以前,}); 参数
基础:弦图片资源的基础路径必填示例:“https://image.example.com/static/images/"
来源:数组需要预加载的图片资源必填示例:[ImageSource。横幅、ImageSource。imageList]
加载:函数图片加载中的回调方法非必填示例:
加载:函数图片记载完成后的回调非必填示例:
<强>加载器(ImageLoader。js)源码:
let base =, 0;
let Img =,函数(src), {=,,this.src src;=,this.status 假;=,this.fail 假;
}
,
let loop =,(啊,,res),=祝辞,{
,let tem =,种(o);
,tem.map (v =祝辞,{
,if (typeof o [v],===, & # 39;对象# 39;),{
,循环(o [v], res);
,}else {
,如果(v ===, & # 39;基地# 39;),{=,base o [v];
,}else {
,res.push (o [v]);
,}
,}
,});
}
,
function ImageLoader (obj), {
,let arr =,[];,,如果(obj.loading), {=,,this.loadingcallback obj.loading;
,}
,如果(obj.loaded) {=,,this.loadedcallback obj.loaded;
,}
,
,如果(obj.base) {=,base obj.base
,}=,this.insert (项),=祝辞,{
,arr.push(项);
,};
,
,this.init =, (o),=祝辞,{
,let res =, [];
,循环(o, res);
,console.log (res)
,res.map ((v),=祝辞,{
,this.insert (new Img (v));
,});
,this.load ();
,};
,
,this.load =,(),=祝辞,{=,this.start (new 日期).getTime ();
,arr.map ((v),=祝辞,{
,let src =, base ?, base +, v.src:, v.src;
,wx.getImageInfo ({
,src: src,
,成功:res =祝辞,{=,v.status 真实;
},
,失败:err =祝辞,{=,v.fail 真实;
,}
,})
,});
,let timer =, setInterval((),=祝辞,{
,let status =, this.isLoaded ();
,if (地位),{
,clearTimeout(计时器);
,}
,},200);
,
,setTimeout((),=祝辞,{
,clearTimeout(计时器);
,},60000);
,};
,
,this.isLoaded =,(),=祝辞,{
,let status =,真的,=,count 0,=,fail 0;
,arr.map ((v),=祝辞,{
,if (! v.status), {=,status 假;
,}else {
+=,count 1;
,}
,如果(v.fail) {=,status 真实;
+=,fail 1;
,}
,});
,如果(地位){
,如果(this.loadedcallback) {
,this.loadedcallback ({
,状态:没错,
,时间成本:(new 日期).getTime(),安康;this.start,
,成功:计数,
,失败:失败,
,totalcount: arr.length
,})
,}
,}else {
,如果(this.loadingcallback) {
,this.loadingcallback ({
,状态:假的,
,百分比:count /arr.length
,});
,}
,}
,return 地位;
,};
,如果(obj.source) {
,this.init (obj.source);
,}
}
module.exports =, ImageLoader
