小程序远程图片资源按需预加载
最近做H5开发遇到个问题,为了防止页面打开时,出现大图加载缓慢的情况,写了一个图片资源管理器,今天顺便实现了一下小程序版。
特别说明一下,小程序由于资源包大小限制,很多图片资源会存放到CND图片服务器上,为了实现小程序初始化时按需加载远程图片资源,实现了以下加载器,希望能解决部分小程序新人开发者预加载图片的苦恼。
特别强调: 本加载器为初级版本,暂未研究其他实现方式,当前实现方式需要在微信公众平台->设置->downloadFile合法域名,中添加想要加载的图片所在服务器合法域名。
原理介绍: 使用小程序自带API读取远程图片资源:
这个接口可以创建图片组件对象并返回图片加载状态。
加载器用法:
(此图片来源于网络,如有侵权,请联系删除! ) 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对象。
参数 base : String 图片资源的基础路径 必填 示例: “https://image.example.com/static/images/” source : Array 需要预加载的图片资源 必填 示例: [ImageSource.banners, ImageSource.imageList] loading : function 图片加载中的回调方法 非必填 示例: loaded : funciton 图片记载完成后的回调 非必填 示例:
加载器(ImageLoader.js)源码:
图片资源路径文件(imageSource.js)源码:
说明: BASE 字段必填 根据自我需要填写。
其他图片资源支持: 1、直接key:value形式把图片路径写入,如: "single1": "ghost.4449aa4.png" 2、类似于pages目录把每个页面的远程资源写入到对应位置下,方便引用和管理,如:
3、直接以数组方式把图片堆放在一个数组里,如:
4、随意的资源数组,对象嵌套,如:
这样就完成了整个远程图片资源加载器的配置,可以在new ImageLoader() 对象的 loading, loaded回调中看到图片预加载的最终状态status,数量totalcount,成功加载的图片数量success,加载失败的图片数量fail, 加载图片的总计耗时timecost(单位ms)。
创建ImageLoader对象时source字段的说明:
source字段接受一个Array类型的参数,以上文中imageSource.js中的配置来说,写了很多不同格式的数据,使用 const ImageSource = require('./imageSource.js'); 引入后,可以直接使用ImageSource来读取各个部分的数据,因此在配置source字段时可以直接把整个ImageSource对象放入进去 source: [ImageSource] 也可以根据项目需要只加载其中一部分资源,如: source: [ImageSource.imageList, ImageSource.single2] 这样加载器在执行时就会只载入source中写入的部分,而不是整个ImageSource。 最后,在加载过程中如果过于耗时,可以选择在每个页面的onLoad里单独加载资源,做法类似于在app里调用,本文的示例是写在app.js的onLaunch中。如果加载时间过长可以做一个进度条或者加载动画,优化启动体验。预加载过的图片会在微信内存中缓存一到小程序进程被关闭,因此在随后的页面里可以直接使用图片。
|
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
本站为避免不必要的纷争,分享的所有资源中一切可能有版权风险的资源将全部转载自第三方网站或平台,站长只为大家提供相关资源的介绍和跳转引导。 因可能有疏忽大意,所以如有遗漏资源侵犯了您的合法权利,请联系站长删除。
【小程序源码网资源下载使用说明】:
本站所分享的一切QQ小程序源码,thinkphp整站源码,微信小程序源码,图文教程等资源仅供用户学习参考使用,任何人不得作其他用途,违者自行承担所有责任。
【小程序源码网毫无人看的介绍】:
本站又称Z站,原名贼娘网,开站于2018年,换过三任站长,目前站长是第四任站长,本站是一个主要分享免费开源小程序源码/网站源码/免费素材/教程资源的网站,主要小程序资源有用于学习的小程序源码,也有正版原创可商用的小程序源码,是一个公益博客型网站。
【小程序源码网原创源码版权申明】:
未经小程序源码网许可,任何人不得擅自使用本站原创首发源码进行商业行为(除本站VIP用户在期限内,版权无使用限制),否则将依法承担相应赔偿责任。
【小程序源码网转载文章版权申明】:
本站所转载的QQ小程序或微信小程序源码与其他资源仅供学习,任何人不得作其他用途,违者自行承担所有责任。
【小程序源码网站长最后的屁话】:
如有您认为本站有任何侵犯您合法权益的文章,或者您有什么疑问需求,欢迎联系站长QQ,站长24小时在线,备注公司名称和源码版权问题或者需要小程序定制开发等站长业务类型可急速处理,如果您只是交流小程序的一些开发问题或源码问题可以加入QQ群讨论,就不用加站长啦,对于白嫖党,QQ群才是处理问题的天堂,当然站长也欢迎大家骚扰~
小程序源码网 » 小程序远程图片资源按需预加载