使用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程序之undefined篇(中)
Nov 23 Javascript
用Jquery选择器计算table中的某一列某一行的合计
Aug 13 Javascript
node.js中的fs.mkdir方法使用说明
Dec 17 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
利用 spin.js 生成等待效果(js 等待效果)
Jun 25 Javascript
js 取消页面可以选中文字的功能方法
Jan 02 Javascript
关于vue面试题汇总
Mar 20 Javascript
js 实现在2d平面上画8的方法
Oct 10 Javascript
angular学习之动态创建表单的方法
Dec 07 Javascript
关于React动态加载路由处理的相关问题
Jan 07 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 Javascript
VueJS实现用户管理系统
May 29 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
利用js调用后台php进行数据处理原码
2006/10/09 PHP
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
PHP strtok()函数的优点分析
2010/03/02 PHP
PHP常用的缓存技术汇总
2014/05/05 PHP
php图片添加水印例子
2016/07/20 PHP
javascript 类定义的4种方法
2009/09/12 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
javascript将数字转换整数金额大写的方法
2015/01/27 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
jquery延迟对象解析
2016/10/26 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
详解javascript获取url信息的常见方法
2016/12/19 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
Vue2 SSR渲染根据不同页面修改 meta
2017/11/20 Javascript
ajax请求data遇到的问题分析
2018/01/18 Javascript
Vuex中mutations与actions的区别详解
2018/03/01 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
vue2 中二级路由高亮问题及配置方法
2019/06/10 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
用Python编写一个国际象棋AI程序
2014/11/28 Python
python2 与 python3 实现共存的方法
2018/07/12 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
python使用wxpy轻松实现微信防撤回的方法
2019/02/21 Python
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
《会变的花树叶》教学反思
2014/02/10 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
golang 实现时间戳和时间的转化
2021/05/07 Golang
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js