介绍
这篇文章主要介绍微信小程序中图片预加载组件wxapp-img-loader的使用示例,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
<强>微信小程序中图片预加载组件wxapp-img-loader的使用示例强>
由于微信小程序没有提供类似形象这样的JS对象,要实现图片的预加载要麻烦一些,wxapp-img-loader自定义组件可以在微信小程序中实现图片预加载功能。
<强>使用强>
1,下载wxapp-img-loader项目源代码(https://github.com/o2team/wxa..),将img-loader目录拷贝到你的项目中
2,在页面的WXML文件中添加以下代码,将组件模板引入
& lt; https://www.yisu.com/zixun/img-loader/img-loader.wxml import src="/> <模板=" img-loader“data=" {{imgLoadList}} "> 模板>
3,在页面的JS文件中引入组件脚本
const ImgLoader =,要求(& # 39;. ./. ./img-loader img-loader.js& # 39;)
4,实例化一个ImgLoader对象,将这个(当页面前对象)传入,第二个参数可选,为默认的图片加载完成的回调方法
this.imgLoader =, new ImgLoader(这)
5,调用ImgLoader实例的负载方法进行图片加载,第一个参数为图片链接,第二个参数可选,为该张图片加载完成时的回调方法。图片加载完成的回调方法的第一个参数为错误信息(加载成功则为零),第二个参数为图片信息(对象类型,包括src,宽度及高度)。
this.imgLoader.load (imgUrlOriginal,,(呃,,数据),=祝辞,{,,,console.log(& # 39;图片加载完成& # 39;,,呃,,,data.src, data.width,, data.height) })
wxapp-img-loader组件可以加载单张图片,也可以加载多张图片。
运行效果:
以上是“微信小程序中图片预加载组件wxapp-img-loader的使用示例”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!