使用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之文件操作
Mar 07 Javascript
js 方法实现返回多个数据的代码
Apr 30 Javascript
javascript parseInt与Number函数的区别
Jan 21 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 Javascript
js动态调用css属性的小规律及实例说明
Dec 28 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
Sep 14 Javascript
Bootstrap组合上、下拉框简单实现代码
Mar 06 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
May 24 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 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
转生史莱姆:萌王第一次撸串开心到飞起,哥布塔撸串却神似界王神
2018/11/30 日漫
php的控制语句
2006/10/09 PHP
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
使用Apache的htaccess防止图片被盗链的解决方法
2013/04/27 PHP
JS解密入门 最终变量劫持
2008/06/25 Javascript
使用JS获取当前地理位置方法汇总
2014/12/18 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
2015/06/04 Javascript
javascript中html字符串转化为jquery dom对象的方法
2015/08/27 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
ES6新特性之Object的变化分析
2017/03/31 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
2017/06/13 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
js 事件的传播机制(实例讲解)
2017/07/20 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
2017/11/11 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
linux下python抓屏实现方法
2015/05/22 Python
Python实现批量读取word中表格信息的方法
2015/07/30 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
python实现图片二值化及灰度处理方式
2019/12/07 Python
python数据预处理方式 :数据降维
2020/02/24 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
慕尼黑山地运动、户外服装和体育用品专家:Sporthaus Schuster
2019/08/27 全球购物
南京迈特望C/C++面试题
2012/07/09 面试题
介绍一下内联、左联、右联
2013/12/31 面试题
日语专业个人求职信范文
2014/02/02 职场文书
客户付款通知书
2015/04/23 职场文书
Jpa Specification如何实现and和or同时使用查询
2021/11/23 Java/Android
python套接字socket通信
2022/04/01 Python