使用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 相关文章推荐
InnerHtml和InnerText的区别分析
Mar 13 Javascript
鼠标右击事件代码(asp.net后台)
Jan 27 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
Oct 18 Javascript
Jquery解析json数据详解
Dec 26 Javascript
JQuery弹出层示例可自定义
May 19 Javascript
coffeescript使用的方式汇总
Aug 05 Javascript
Nginx上传文件全部缓存解决方案
Aug 17 Javascript
AngularJs Managing Service Dependencies详解
Sep 02 Javascript
JS字符串按逗号和回车分隔的方法
Apr 25 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
JS深入学习之数组对象排序操作示例
May 01 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编码规范-php coding standard
2007/03/16 PHP
php数据库配置文件一般做法分享
2012/07/07 PHP
浅析php与数据库代码开发规范
2013/08/08 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
javascript常用的正则表达式实例
2014/05/15 Javascript
一个JavaScript操作元素定位元素的实例
2014/10/29 Javascript
nodejs中实现路由功能
2014/12/29 NodeJs
JavaScript模拟push
2016/03/06 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
layui结合form,table的全选、反选v1.0示例讲解
2018/08/15 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
通过python下载FTP上的文件夹的实现代码
2013/02/10 Python
python学习笔记之调用eval函数出现invalid syntax错误问题
2015/10/18 Python
Python图像处理之图像的缩放、旋转与翻转实现方法示例
2019/01/04 Python
python数据预处理之数据标准化的几种处理方式
2019/07/17 Python
python标记语句块使用方法总结
2019/08/05 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
纯css3显示隐藏一个div特效的具体实现
2014/02/10 HTML / CSS
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
HTML5计时器小例子
2013/10/15 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
优秀党务工作者事迹材料
2014/05/07 职场文书
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang
mysql联合索引的使用规则
2021/06/23 MySQL
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS
Nginx流量拷贝ngx_http_mirror_module模块使用方法详解
2022/04/07 Servers