使用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实现很浪漫的气泡冒出特效
Sep 05 Javascript
jQuery Validate插件实现表单强大的验证功能
Dec 18 Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 Javascript
JS多物体实现缓冲运动效果示例
Dec 20 Javascript
利用Node.js编写跨平台的spawn语句详解
Feb 12 Javascript
在ABP框架中使用BootstrapTable组件的方法
Jul 31 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
vue2.x select2 指令封装详解
Oct 12 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 Javascript
详解JSON.stringify()的5个秘密特性
May 26 Javascript
JavaScript数组类型Array相关的属性与方法详解
Sep 08 Javascript
详解vue修改elementUI的分页组件视图没更新问题
Nov 13 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
PHP中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
php获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
php实现网站文件批量压缩下载功能
2015/10/28 PHP
基于PHP-FPM进程池探秘
2017/10/17 PHP
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
在JS中如何调用JSP中的变量
2014/01/22 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
通过Javascript读取本地Excel文件内容的代码示例
2014/04/08 Javascript
JavaScript开发人员的10个关键习惯小结
2014/12/05 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
JavaScript利用Date实现简单的倒计时实例
2017/01/12 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
js实现简单掷骰子小游戏
2019/10/24 Javascript
Python批量修改文本文件内容的方法
2016/04/29 Python
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
快速了解python leveldb
2018/01/18 Python
使用Python来开发微信功能
2018/06/13 Python
Python面向对象基础入门之设置对象属性
2018/12/11 Python
python实现多层感知器
2019/01/18 Python
Python中的asyncio代码详解
2019/06/10 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
Python使用Paramiko控制liunx第三方库
2020/05/20 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
python入门教程之基本算术运算符
2020/11/13 Python
致长跑运动员加油稿
2014/02/20 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
汇报材料怎么写
2014/12/30 职场文书
导游词之临安白水涧
2019/11/05 职场文书