微信小程序中图片预加载组件wxapp-img-loader的使用示例

  介绍

这篇文章主要介绍微信小程序中图片预加载组件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的使用示例

以上是“微信小程序中图片预加载组件wxapp-img-loader的使用示例”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!

微信小程序中图片预加载组件wxapp-img-loader的使用示例