查看: 1155|回复: 0

[UI模板] 适用于微信小程序的图片预加载组件

[复制链接]
发表于 2019-9-19 15:16:29 | 显示全部楼层 |阅读模式
本帖最后由 大兵小虾 于 2019-9-19 15:20 编辑

wxapp-IMG-装载机

适用于微信小程序的图片预加载组件

适用于微信小程序的图片预加载组件


这是一个适用于微信小程序的原生图片预加载组件(若你使用的是Taro,请移步至taro分支),已应用于京东购物等多个小程序中。使用步骤如下:

1,将img-loader目录拷贝到你的项目中

2,在页面的WXML文件中添加以下代码,将组件模板引入
  1. < import  src = “ ../../ img- loader / img- loader.wxml ” />
  2. < template  is = “ img-loader ”  data = “ {{imgLoadList}} ” >
复制代码
3,在页面的JS文件中引入组件脚本
  1. const  ImgLoader  =  require(' ../../img-loader/img-loader.js ')
复制代码
4,实例化一个ImgLoader对象,将此(当前页对象)传入,第二个参数可选,为默认的图片加载完成的回调方法

这个。
  1. imgLoader  =  new  ImgLoader(this)
复制代码

5,调用ImgLoader实例的load方法进行图片加载,第一个参数为图片链接,第二个参数可选,为该张图片加载完成时的回调方法

这个。
  1. imgLoader。负载(imgUrlOriginal,(ERR,数据)=> {
  2. 控制台。日志('图片加载完成',ERR,数据。SRC,数据。宽度,数据。高度)
  3. })
复制代码
注:图片加载完成的回调方法的第一个参数为错误信息(加载成功则为null),第二个参数为图片信息(对象类型,包括src,宽度和高度)。

使用方法可参考演示目录的事例,包括加载单张图片,及加载多张图片的场景,运行效果如下图所示:



demo下载

游客,如果您要下载源码或者查看隐藏内容请回复



回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

网站推荐上一条 /1 下一条



邮箱:[email protected] QQ:791577401 木子牛HTML5工作室 版权所有

© MUZINIU Inc.小黑屋|手机版|Archiver|HANGNIU  

Powered by MuZiNiuX3.2( 豫ICP备12017936号 )

 豫公网安备 41078102000103号

快速回复 返回顶部 返回列表