使用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 相关文章推荐
IE/FireFox具备兼容性的拖动代码
Aug 13 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
Mar 21 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
解决ionic和angular上拉加载的问题
Aug 03 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 Javascript
angularJs利用$scope处理升降序的方法
Oct 08 Javascript
bootstrap table实现横向合并与纵向合并
Jul 18 Javascript
浅谈vuex的基本用法和mapaction传值问题
Nov 08 Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
Mar 26 Javascript
Vue切换div显示隐藏,多选,单选代码解析
Jul 14 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 多行多列显示
2009/08/15 PHP
php设计模式 Observer(观察者模式)
2011/06/26 PHP
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
Java和PHP在Web开发方面对比分析
2015/03/01 PHP
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
Python实现定时任务
2017/02/08 Python
Python标准库之collections包的使用教程
2017/04/27 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
对Python中列表和数组的赋值,浅拷贝和深拷贝的实例讲解
2018/06/28 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
新浪微博实习心得体会
2014/01/27 职场文书
感谢信的格式
2015/01/21 职场文书
检讨书范文1000字
2015/01/28 职场文书
红白喜事主持词
2015/07/06 职场文书
php中pcntl_fork详解
2021/04/01 PHP
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python
Python 键盘事件详解
2021/11/11 Python
create-react-app开发常用配置教程
2022/06/25 Javascript