E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

由题目便可知,wxapp-img-loader是一款插件,适用于微信小程序的图片预加载组件,并已应用于京东购物小程序版中。使用步骤如下: 1、将 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 方法进行图片加载,第一个参数为图片链接,第二个参数可选,为该张图片加载完成时的回调方法this.imgLoader.load(imgUrlOriginal, (err, data) => {    console.log(‘图片加载完成’, err, data.src, data.width, data.height)})注:图片加载完成的回调方法的第一个参数为错误信息(加载成功则为 null),第二个参数为图片信息(Object 类型,包括 src、width 及 height)。 6、图片加载模式示例 (1)加载多张图片 js://引入图片预加载组件const ImgLoader = require(‘../../img-loader/img-loader.js’)//生成一些测试数据function genImgListData() {    let images = [        ‘http://img10.360buyimg.com/img/s600x600_jfs/t3586/215/2086933702/144606/c5885c8b/583e2f08N13aa7762.png’,        ‘http://img10.360buyimg.com/img/s600x600_jfs/t3643/111/394078676/159202/a59f6b72/5809b3ccN41e5e01f.jpg’,        ‘http://img10.360buyimg.com/img/s600x600_jfs/t3388/167/1949827805/115796/6ad813/583660fbNe5c34eae.jpg’,        ‘http://img10.360buyimg.com/img/s600x600_jfs/t3163/281/5203602423/192427/db09be58/5865cb7eN808cc6f4.png’,        ‘http://img10.360buyimg.com/img/s600x600_jfs/t3634/225/410542226/185677/c17f0ecf/5809b073N364fe77e.jpg’,        ‘http://img10.360buyimg.com/img/s600x600_jfs/t3808/206/329427377/119593/a8cf7470/580df323Nb641ab96.jpg’,        ‘http://img10.360buyimg.com/img/s600x600_jfs/t3805/133/325945617/116002/e90e0bdf/580df2b5Ncb04c5ac.jpg’,        ‘http://img10.360buyimg.com/img/s600x600_jfs/t3046/316/3037048447/184004/706c779e/57eb584fN4f8b6502.jpg’,        ‘http://img10.360buyimg.com/img/s600x600_jfs/t3580/212/1841964843/369414/e78739fb/58351586Ne20ac82a.jpg’,        ‘http://img10.360buyimg.com/img/s600x600_jfs/t3274/70/4925773051/133266/fae6e84/585c9890Na19001c8.png’,        ‘http://img10.360buyimg.com/img/s600x600_jfs/t3157/27/5204515328/123020/5f061d81/5865cbcaNfdf0557f.png’,        ‘http://img10.360buyimg.com/img/s600x600_jfs/t3265/341/5152556931/143928/bdf279a4/5865cb96Nff26fc5d.png’    ]    images = images.concat(images.slice(0, 4))    return images.map(item => {        return {            url: item,            loaded: false        }    })}Page({    data: {        imgList: genImgListData()    },    onLoad() {        //初始化图片预加载组件,并指定统一的加载完成回调        this.imgLoader = new ImgLoader(this, this.imageOnLoad.bind(this))    },    loadImages() {        //同时发起全部图片的加载        this.data.imgList.forEach(item => {            this.imgLoader.load(item.url)        })    },    //加载完成后的回调    imageOnLoad(err, data) {        console.log(‘图片加载完成’, err, data.src)        const imgList = this.data.imgList.map(item => {            if (item.url == data.src)                item.loaded = true            return item        })        this.setData({ imgList })    }})wxml:<view class=”img_list”>    <view wx:for=”{{ imgList }}” class=”img_wrap”>        <image wx:if=”{{ item.loaded }}” src=”{{ item.url }}” class=”fade_in” />    </view></view><button bindtap=”loadImages”>Click To Load Images</button><!– 引入图片预加载组件 –><import src=”../../img-loader/img-loader.wxml”/><template is=”img-loader” data=”{{ imgLoadList }}”></template>wxss:@keyframes fadeIn {    0% { opacity: 0; }    100% { opacity: 1; }}.img_list {    margin: 10px 0;    text-align: center;}.img_wrap {    display: inline-block;    width: 185rpx;    height: 185rpx;}image {    width: 100%;    height: 100%;}.fade_in {    animation: fadeIn 1s both;}效果图: (2)加载单张图片 js://引入图片预加载组件const ImgLoader = require(‘../../img-loader/img-loader.js’)//缩略图 80×50 3KBconst imgUrlThumbnail = ‘http://storage.360buyimg.com/mtd/home/lion1483683731203.jpg’//原图 3200×2000 1.6MBconst imgUrlOriginal = ‘http://storage.360buyimg.com/mtd/home/lion1483624894660.jpg’Page({    data: {        msg: ”,        imgUrl: ”    },    onLoad() {        //初始化图片预加载组件        this.imgLoader = new ImgLoader(this)    },    loadImage() {        //加载缩略图        this.setData({            msg: ‘大图正在拼命加载..’,            imgUrl: imgUrlThumbnail        })        //同时对原图进行预加载,加载成功后再替换        this.imgLoader.load(imgUrlOriginal, (err, data) => {            console.log(‘图片加载完成’, err, data.src)            this.setData({ msg: ‘大图加载完成~’ })            if (!err)                this.setData({ imgUrl: data.src })        })    }})wxml:<view class=”img_wrap”>    <image wx:if=”{{ imgUrl }}” src=”{{ imgUrl }}” /></view><button bindtap=”loadImage”>Click To Load Image</button><view class=”msg”>{{ msg }}</view><!– 引入图片预加载组件 –><import src=”../../img-loader/img-loader.wxml”/><template is=”img-loader” data=”{{ imgLoadList }}”></template>wxss:.img_wrap {    margin-bottom: 10px;    width: 750rpx;    height: 468rpx;    background: #ececec;}image {    width: 100%;    height: 100%;}.msg {    margin: 10px 0;    text-align: center;}效果图: 注:若不想显示图片,可以使用样式进行隐藏。源程序请参考https://github.com/o2team/wxapp-img-loader。小程序

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 适用于微信小程序的图片预加载组件——wxappimgloader
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏