使用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 相关文章推荐
统计出现最多的字符次数的js代码
Dec 03 Javascript
js 动态给元素添加、移除事件的实现方法
Jul 19 Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
Aug 25 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
Jan 19 Javascript
JavaScript设计模式之单例模式详解
Jun 09 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
vue几个常用跨域处理方式介绍
Feb 07 Javascript
vue.js 微信支付前端代码分享
Feb 10 Javascript
layui的table中显示图片方法
Aug 17 Javascript
vue-router 起步步骤详解
Mar 26 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
ezSQL PHP数据库操作类库
2010/05/16 PHP
基于PHPExcel的常用方法总结
2013/06/13 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
PHP实现获取第一个中文首字母并进行排序的方法
2017/05/09 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
js 鼠标拖动对象 可让任何div实现拖动效果
2009/11/09 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
jQuery事件绑定与解除绑定实现方法
2015/04/15 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
Javascript实现的简单右键菜单类
2015/09/23 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
AngularJS中的指令全面解析(必看)
2016/05/20 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
前端Vue项目详解--初始化及导航栏
2019/06/24 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
python实现将英文单词表示的数字转换成阿拉伯数字的方法
2015/07/02 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
Python通过paramiko远程下载Linux服务器上的文件实例
2018/12/27 Python
Python基于matplotlib画箱体图检验异常值操作示例【附xls数据文件下载】
2019/01/07 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
地球上最先进的胡子和头发修剪器:Bevel
2018/01/23 全球购物
恶意软件的定义
2014/11/12 面试题
化工工艺专业求职信
2013/09/22 职场文书
运动会邀请函范文
2014/02/06 职场文书
《小松树和大松树》教学反思
2014/02/20 职场文书
电台广播稿范文
2015/08/19 职场文书
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题