使用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重要知识更新
Jul 08 Javascript
客户端 使用XML DOM加载json数据的方法
Sep 28 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
Aug 28 Javascript
js获取当前页面的url网址信息
Jun 12 Javascript
JS实现为表格动态添加标题的方法
Mar 31 Javascript
优化RequireJS项目的相关技巧总结
Jul 01 Javascript
第十章之巨幕页头缩略图与警告框组件
Apr 25 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
Jan 22 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 Javascript
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
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
VML绘图板②脚本--VMLgraph.js、XMLtool.js
2006/10/09 PHP
Zend Framework教程之MVC框架的Controller用法分析
2016/03/07 PHP
点图片上一页下一页翻页效果
2008/07/09 Javascript
javascript 一些用法小结
2009/09/11 Javascript
JavaScript window.setTimeout() 的详细用法
2009/11/04 Javascript
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
基于jquery的3d效果实现代码
2011/03/23 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
封装好的javascript前端分页插件pagination
2016/01/04 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
2016/02/03 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
NodeJs form-data格式传输文件的方法
2017/12/13 NodeJs
深入浅析Vue全局组件与局部组件的区别
2018/06/15 Javascript
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
详解vue中localStorage的使用方法
2018/11/22 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
2019/05/22 Javascript
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
2020/09/04 Javascript
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
Django--权限Permissions的例子
2019/08/28 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
Jdbc数据访问技术面试题
2012/03/30 面试题
管理学院毕业生自荐信范文
2014/03/10 职场文书
告知书格式
2015/07/01 职场文书
特种设备安全管理制度
2015/08/06 职场文书
《去年的树》教学反思
2016/02/18 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python
MySQL索引知识的一些小妙招总结
2021/05/10 MySQL
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers
Python Matplotlib库实现画局部图
2021/11/17 Python