用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

2518

主题

7246

帖子

2万

积分

版主

Rank: 7Rank: 7Rank: 7

积分
25300
2017-1-6 19:38:55 天下雪原创达人 造轮子 版主 楼主 271267
实用的组件 1213123.gif

代码示例:
[AppleScript] 纯文本查看 复制代码
/**
 * 图片预加载组件
 *
 * @author HuiminLiu
 */

class ImgLoader {
	/**
	 * 初始化方法,在页面的 onLoad 方法中调用,传入 Page 对象及图片加载完成的默认回调
	 */
	constructor(pageContext, defaultCallback) {
		this.page = pageContext
		this.defaultCallback = defaultCallback || function(){}
		this.callbacks = {}
		this.imgInfo = {}

		this.page.data.imgLoadList = [] //下载队列
		this.page._imgOnLoad = this._imgOnLoad.bind(this)
		this.page._imgOnLoadError = this._imgOnLoadError.bind(this)
	}

	/**
	 * 加载图片
	 *
	 * @param  {String}   src      图片地址
	 * @param  {Function} callback 加载完成后的回调(可选),第一个参数个错误信息,第二个为图片信息
	 */
	load(src, callback) {
		if (!src) return;

		let list = this.page.data.imgLoadList,
			imgInfo = this.imgInfo[src]

		if (callback)
			this.callbacks[src] = callback

		//已经加载成功过的,直接回调
		if (imgInfo) {
			this._runCallback(null, {
				src: src,
				width: imgInfo.width,
				height: imgInfo.height
			})
		
		//新的未在下载队列中的
		} else if (list.indexOf(src) == -1) {
			list.push(src)
			this.page.setData({ 'imgLoadList': list })
		}
	}

	_imgOnLoad(ev) {
		let src = ev.currentTarget.dataset.src,
			width = ev.detail.width,
			height = ev.detail.height

		//记录已下载图片的尺寸信息
		this.imgInfo[src] = { width, height }
		this._removeFromLoadList(src)

		this._runCallback(null, { src, width, height })
	}

	_imgOnLoadError(ev) {
		let src = ev.currentTarget.dataset.src
		this._removeFromLoadList(src)
		this._runCallback('Loading failed', { src })
	}

	//将图片从下载队列中移除
	_removeFromLoadList(src) {
		let list = this.page.data.imgLoadList
		list.splice(list.indexOf(src), 1)
		this.page.setData({ 'imgLoadList': list })
	}

	//执行回调
	_runCallback(err, data) {
		let callback = this.callbacks[data.src] || this.defaultCallback
		callback(err, data)
		delete this.callbacks[data.src]
	}
}

module.exports = ImgLoader


项目地址及下载:
https://github.com/o2team/wxapp-img-loader
wxapp-img-loader-master.zip (10.92 KB, 下载次数: 34)
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
666666 mark一下
图片预加载
666
学习下
2017-1-11 20:58:15 react 架构狮
7#
666楼主好人
2017-1-16 11:31:11 飞鱼 架构狮
9#
5555555555555
2017-1-16 11:41:32 dyl 新手上路
10#
11
这个其实很有用的~
2017-1-20 18:24:06 M-信念乐于助人 优秀会员纪念 开发者认证 版主
12#
6666666
刚刚找到个人签名的地方,装装逼
好东西
2017-1-22 15:23:50 白水 攻城狮
14#
前来学习
2017-1-23 10:10:15 ttjh 架构狮
15#
111111111111111111111111111111111
12下一页
发新帖
您需要登录后才可以回帖 登录 | 立即注册