使用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 相关文章推荐
eval与window.eval的差别分析
Mar 17 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
JS实现左右无缝轮播图代码
May 01 Javascript
js仿淘宝和百度文库的评分功能
May 15 Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 Javascript
js+html获取系统当前时间
Nov 10 Javascript
vuex的简单使用教程
Feb 02 Javascript
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
区别JavaScript函数声明与变量声明
Sep 12 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
Jul 02 Javascript
vue实现一拉到底的滑动验证
Jul 25 Javascript
js绘制一条直线并旋转45度
Aug 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
文件上传类
2006/10/09 PHP
php下使用SimpleXML 处理XML 文件
2010/02/27 PHP
PHP CURL 多线程操作代码实例
2015/05/13 PHP
PHP调试及性能分析工具Xdebug详解
2017/02/09 PHP
Javascript 学习笔记 错误处理
2009/07/30 Javascript
jquery里的each使用方法详解
2010/12/22 Javascript
Javascript中的关键字和保留字整理
2014/10/16 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
jQuery+ajax实现局部刷新的两种方法
2017/06/08 jQuery
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
vue 中url 链接左边的小图标更改问题
2019/12/30 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
python 数据加密代码
2008/12/24 Python
python字符串排序方法
2014/08/29 Python
Python制作exe文件简单流程
2019/01/24 Python
Python基于滑动平均思想实现缺失数据填充的方法
2019/02/21 Python
Python 画出来六维图
2019/07/26 Python
Python通过kerberos安全认证操作kafka方式
2020/06/06 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
几款好用的python工具库(小结)
2020/10/20 Python
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
简单介绍Object类的功能、常用方法
2013/10/02 面试题
简述安装Slackware Linux系统的过程
2012/01/12 面试题
领导检查欢迎词
2014/01/14 职场文书
花坛标语大全
2014/06/30 职场文书
先进党支部申报材料
2014/12/24 职场文书
2015初中团支部工作总结
2015/07/21 职场文书
高中信息技术教学反思
2016/02/16 职场文书
SQLServer中exists和except用法介绍
2021/12/04 SQL Server
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers