使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能


Posted in Javascript onOctober 18, 2018

由于微信小程序没有提供类似 Image 这样的 JS 对象,要实现图片的预加载要麻烦一些, wxapp-img-loader自定义组件可以在微信小程序中实现图片预加载功能。

使用

1、下载 wxapp-img-loader项目源代码(https://github.com/o2team/wxa...),将 img-loader 目录拷贝到你的项目中

2、在页面的 WXML 文件中添加以下代码,将组件模板引入

<import src="../../img-loader/img-loader.wxml"/>
<template is="img-loader" data="{{ imgLoadList }}">
</template>

3、在页面的 JS 文件中引入组件脚本

const ImgLoader = require('../../img-loader/img-loader.js')

4、实例化一个 ImgLoader 对象,将 this(当前 Page 对象) 传入,第二个参数可选,为默认的图片加载完成的回调方法

this.imgLoader = new ImgLoader(this)

5、调用 ImgLoader 实例的 load 方法进行图片加载,第一个参数为图片链接,第二个参数可选,为该张图片加载完成时的回调方法。图片加载完成的回调方法的第一个参数为错误信息(加载成功则为 null),第二个参数为图片信息(Object 类型,包括 src、width 及 height)。

this.imgLoader.load(imgUrlOriginal, (err, data) => 
{  
console.log('图片加载完成', err, data.src, data.width, data.height)
})

wxapp-img-loader组件可以加载单张图片、也可以加载多张图片。

运行效果:

使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能

使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能

其他

wxapp-img-loader项目地址:https://github.com/o2team/wxa...

总结

以上所述是小编给大家介绍的使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 获取图片颜色
Apr 05 Javascript
JavaScript中“基本类型”之争小结
Jan 03 Javascript
仿新浪微博登陆邮箱提示效果的js代码
Aug 02 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
Mar 05 Javascript
node.js使用require()函数加载模块
Nov 26 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
Mar 24 Javascript
JS匿名函数实例分析
Nov 26 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
angular5 httpclient的示例实战
Mar 12 Javascript
微信小程序实现滑动切换自定义页码的方法分析
Dec 29 Javascript
少女风vue组件库的制作全过程
May 15 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
Oct 18 #Javascript
vue中导出Excel表格的实现代码
Oct 18 #Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 #Javascript
vue 指令之气泡提示效果的实现代码
Oct 18 #Javascript
使用JS获取页面上的所有标签
Oct 18 #Javascript
深入理解 Koa 框架中间件原理
Oct 18 #Javascript
JS实现十分钟倒计时代码实例
Oct 18 #Javascript
You might like
mysql总结之explain
2012/02/27 PHP
tp5.1框架数据库子查询操作实例分析
2020/05/26 PHP
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
nodejs爬虫初试superagent和cheerio
2018/03/05 NodeJs
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
微信小程序左滑删除功能开发案例详解
2018/11/12 Javascript
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
在vue-cli中引入lodash.js并使用详解
2019/11/13 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
使用Python压缩和解压缩zip文件的教程
2015/05/06 Python
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
python实现超市扫码仪计费
2018/05/30 Python
Django web框架使用url path name详解
2019/04/29 Python
Python Pandas分组聚合的实现方法
2019/07/02 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
python如何对链表操作
2020/10/10 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
美国高端牛仔品牌:Silver Jeans
2019/12/12 全球购物
介绍一下你对SOA的认识
2016/04/24 面试题
自动化专业毕业生自荐信
2013/11/01 职场文书
团工委书记自荐书范文
2013/12/17 职场文书
工作表现证明
2015/06/15 职场文书
关爱空巢老人感想
2015/08/11 职场文书
JS中如何优雅的使用async await详解
2021/10/05 Javascript
Unicode中的CJK(中日韩统一表意文字)字符小结
2021/12/06 HTML / CSS
解析python中的jsonpath 提取器
2022/01/18 Python
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电
windows server2016安装oracle 11g的图文教程
2022/07/15 Servers