使用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 相关文章推荐
php上传图片并给图片打上透明水印的代码
Jun 07 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
Jun 27 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 Javascript
有关json_decode乱码及NULL的问题
Oct 13 Javascript
js实现商品抛物线加入购物车特效
Nov 18 Javascript
JavaScript常用正则函数用法示例
Jan 23 Javascript
Javascript中字符串相关常用的使用方法总结
Mar 13 Javascript
详解JS中遍历语法的比较
Apr 07 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
Apr 05 Javascript
基于打包工具Webpack进行项目开发实例
May 29 Javascript
详解解决小程序中webview页面多层history返回问题
Aug 20 Javascript
layui的表单提交以及验证和修改弹框的实例
Sep 09 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加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
全世界最小的php网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
PHP explode()函数用法、切分字符串
2012/10/03 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
详解PHP中mb_strpos的使用
2018/02/04 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
JavaScript 事件查询综合
2009/07/13 Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
jQuery中even选择器的定义和用法
2014/12/23 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
jQuery采用连缀写法实现的折叠菜单效果
2015/09/18 Javascript
解决JS请求服务器gbk文件乱码的问题
2015/10/16 Javascript
理解javascript模块化
2016/03/28 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
jQuery 实现左右两侧菜单添加、移除功能
2018/01/02 jQuery
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
JS前端模块化原理与实现方法详解
2020/03/17 Javascript
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
用map函数来完成Python并行任务的简单示例
2015/04/02 Python
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
高中生学习生活的自我评价
2013/11/27 职场文书
2014年关于两会精神的心得体会
2014/03/17 职场文书
市场总经理岗位职责
2014/04/11 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
浅谈Python项目的服务器部署
2021/04/25 Python
MySQL 重写查询语句的三种策略
2021/05/10 MySQL
MySQL一些常用高级SQL语句
2021/07/03 MySQL
JavaScript前端面试扁平数据转tree与tree数据扁平化
2022/06/14 Javascript