使用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 相关文章推荐
prototype.js的Ajax对象
Sep 23 Javascript
JS获取dom 对象 ajax操作 读写cookie函数
Nov 18 Javascript
jquery获取div宽度的实现思路与代码
Jan 13 Javascript
JavaScript作用域链示例分享
May 27 Javascript
浅谈JavaScript事件的属性列表
Mar 01 Javascript
js window对象属性和方法相关资料整理
Nov 11 Javascript
一分钟理解js闭包
May 04 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
简单说说如何使用vue-router插件的方法
Apr 08 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 Javascript
Vue获取页面元素的相对位置的方法示例
Feb 05 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
May 11 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的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
php函数mkdir实现递归创建层级目录
2016/10/27 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
js 字符串转化成数字的代码
2011/06/29 Javascript
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
2012/12/09 Javascript
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
Python实现XML文件解析的示例代码
2018/02/05 Python
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
Python实现监控键盘鼠标操作示例【基于pyHook与pythoncom模块】
2018/09/04 Python
对pandas数据判断是否为NaN值的方法详解
2018/11/06 Python
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
台湾时尚彩瞳专门店:imeime
2019/08/16 全球购物
注塑工厂厂长岗位职责
2013/12/02 职场文书
团工委书记自荐书范文
2013/12/17 职场文书
《再见了,亲人》教学反思
2014/02/26 职场文书
工业设计毕业生自荐信
2014/04/13 职场文书
《天安门广场》教学反思
2014/04/23 职场文书
青年标兵事迹材料
2014/08/16 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
硕士论文致谢范文
2015/05/14 职场文书
公司人事管理制度
2015/08/05 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python
mysql脏页是什么
2021/07/26 MySQL