Permalink
Browse files

Tab > Spaces

  • Loading branch information...
hihuimin committed Jan 9, 2017
1 parent 840fc5f commit 27d8b598b8176049a784a984918d5f39b8b1605d
View
@@ -36,4 +36,5 @@ this.imgLoader.load(imgUrlOriginal, (err, data) => {
使用方法可参考 demo 目录的事例,包括加载单张图片、及加载多张图片的场景,运行效果如下图所示:
![单张图片预加载](http://storage.360buyimg.com/mtd/home/single-img-load1483686270312.gif)
![多张图片预加载](http://storage.360buyimg.com/mtd/home/multi-img-load1483686388552.gif)
@@ -7,52 +7,52 @@ 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
}
})
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)
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 })
}
const imgList = this.data.imgList.map(item => {
if (item.url == data.src)
item.loaded = true
return item
})
this.setData({ imgList })
}
})
@@ -1,7 +1,7 @@
<view class="img_list">
<view wx:for="{{ imgList }}" class="img_wrap">
<image wx:if="{{ item.loaded }}" src="{{ item.url }}" class="fade_in" />
</view>
<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>
@@ -1,24 +1,24 @@
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
0% { opacity: 0; }
100% { opacity: 1; }
}
.img_list {
margin: 10px 0;
text-align: center;
margin: 10px 0;
text-align: center;
}
.img_wrap {
display: inline-block;
width: 185rpx;
height: 185rpx;
display: inline-block;
width: 185rpx;
height: 185rpx;
}
image {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
}
.fade_in {
animation: fadeIn 1s both;
animation: fadeIn 1s both;
}
@@ -11,28 +11,28 @@ const imgUrlThumbnail = 'http://storage.360buyimg.com/mtd/home/lion1483683731203
const 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
})
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: '大图加载完成~' })
//同时对原图进行预加载,加载成功后再替换
this.imgLoader.load(imgUrlOriginal, (err, data) => {
console.log('图片加载完成', err, data.src)
this.setData({ msg: '大图加载完成~' })
if (!err)
this.setData({ imgUrl: data.src })
})
}
if (!err)
this.setData({ imgUrl: data.src })
})
}
})
@@ -1,5 +1,5 @@
<view class="img_wrap">
<image wx:if="{{ imgUrl }}" src="{{ imgUrl }}" />
<image wx:if="{{ imgUrl }}" src="{{ imgUrl }}" />
</view>
<button bindtap="loadImage">Click To Load Image</button>
@@ -1,16 +1,16 @@
.img_wrap {
margin-bottom: 10px;
width: 750rpx;
height: 468rpx;
background: #ececec;
margin-bottom: 10px;
width: 750rpx;
height: 468rpx;
background: #ececec;
}
image {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
}
.msg {
margin: 10px 0;
text-align: center;
margin: 10px 0;
text-align: center;
}
View
@@ -5,81 +5,81 @@
*/
class ImgLoader {
/**
* 初始化方法,在页面的 onLoad 方法中调用,传入 Page 对象及图片加载完成的默认回调
*/
constructor(pageContext, defaultCallback) {
this.page = pageContext
this.defaultCallback = defaultCallback || function(){}
this.callbacks = {}
this.imgInfo = {}
/**
* 初始化方法,在页面的 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)
}
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;
/**
* 加载图片
*
* @param {String} src 图片地址
* @param {Function} callback 加载完成后的回调(可选),第一个参数个错误信息,第二个为图片信息
*/
load(src, callback) {
if (!src) return;
let list = this.page.data.imgLoadList,
imgInfo = this.imgInfo[src]
let list = this.page.data.imgLoadList,
imgInfo = this.imgInfo[src]
if (callback)
this.callbacks[src] = callback
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 })
}
}
//已经加载成功过的,直接回调
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
_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.imgInfo[src] = { width, height }
this._removeFromLoadList(src)
this._runCallback(null, { src, width, height })
}
this._runCallback(null, { src, width, height })
}
_imgOnLoadError(ev) {
let src = ev.currentTarget.dataset.src
this._removeFromLoadList(src)
this._runCallback('Loading failed', { src })
}
_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 })
}
//将图片从下载队列中移除
_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]
}
//执行回调
_runCallback(err, data) {
let callback = this.callbacks[data.src] || this.defaultCallback
callback(err, data)
delete this.callbacks[data.src]
}
}
module.exports = ImgLoader
@@ -1,3 +1,3 @@
<template name="img-loader">
<image wx:for="{{ imgLoadList }}" wx:key="*this" src="{{ item }}" data-src="{{ item }}" bindload="_imgOnLoad" binderror="_imgOnLoadError" style="width:0;height:0;opacity:0" />
<image wx:for="{{ imgLoadList }}" wx:key="*this" src="{{ item }}" data-src="{{ item }}" bindload="_imgOnLoad" binderror="_imgOnLoadError" style="width:0;height:0;opacity:0" />
</template>

0 comments on commit 27d8b59

Please sign in to comment.