学习永无止境!!!
Hello,出来混早晚是要还的..这句话我算是理解了...上周周末和女朋友忙了两天..算是把任务完成一半了 成败就看10月份了.. 加油咯
言归正传 今天学习了一把wepy的图片懒加载
如果接触过商城项目 或者图片过多的小程序的同学都会遇到过 图片同时加载后的效果
也许 或许 体验不好吧...(os:能跑就行啦!!!)
我们看看正常的效果是什么样的
尴尬
其实还好吧!!! 对不对!!! 挺好的呀!!! 没毛病呀!!! 那么多图片当然要加载咯!!!!
你错了!!! 产品的眼里!!! 噢不 客户的眼里会觉得你这个是个bug!!! 修复!!!
妈耶
行吧~ 让我们看看使用了工具以后的效果
预加载效果
星爸爸的图片是自己随便找的.. 实际项目就找UI吧 当然你也可以选择用空白的去显示 这个就看自己的需要啦
首先我们先使用一个组件 是通过wxapp-img-loader改装而来的
<style lang="less">
</style>
<template lang="wxml" minapp="wepy">
<image wx:for="{{ imgLoadList }}" wx:key="*this" src="{{ item }}" data-src="{{ item }}" bindload="imgOnLoad" binderror="imgOnLoadError" style="width:0;height:0;opacity:0" />
</template>
<script>
import wepy from 'wepy'
export default class ListAnother extends wepy.component {
data = {
imgLoadList: [],
defaultCallback: function(){},
callbacks: {},
imgInfo: {},
}
methods = {
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 })
}
}
onLoad () {
console.log('img-loader组件加载成功~')
}
load(src, callback) {
if (!src) return;
let list = this.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.imgLoadList = list
}
this.$apply()
}
/** 将图片从下载队列中移除 */
removeFromLoadList(src) {
let list = this.imgLoadList
list.splice(list.indexOf(src), 1)
this.imgLoadList = list
}
/** 执行回调 */
runCallback(err, data) {
let callback = this.callbacks[data.src] || this.defaultCallback
callback(err, data)
delete this.callbacks[data.src]
}
}
</script>
正常的在某个页面使用组件
<style lang="less">
@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;
}
.bg{
background: url('http://wx3.sinaimg.cn/mw690/0060lm7Tly1fvdqgg17etj302k02kt8x.jpg');//星爸爸的背景
background-size: 184rpx 184rpx;
}
.size{
width:184rpx;
height:184rpx;
}
</style>
<template lang="wxml" minapp="wepy">
<view class="box">
<!-- 循环数据 渲染-->
<view wx:for="{{ imgList }}" wx:key="{{index}}" class="img_wrap">
<view class="size {{!item.loaded?'bg':null}}">
<image wx:if="{{ item.loaded }}" src="{{ item.url }}" class="fade_in" />
</view>
<view>{{index}}</view>
</view>
<imgloader />
</view>
</template>
<script>
import wepy from 'wepy'
import ImgLoader from '../components/imgloader'
//假数据
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, 0))
console.log(images)
return images.map(item => {
return {
url: item,
loaded: false
}
})
}
export default class Index extends wepy.page {
config = {
}
//组件
components = {
imgloader: ImgLoader
}
data = {
imgList:genImgListData(),
}
onLoad(){
console.log(this.imgList)
//循环数据 广播事件给imgloader组件 触发load函数 传参 回调
this.imgList.forEach(item => {
this.$invoke('imgloader','load',item.url,(err,data)=>{
console.log(data.src)
item.loaded = item.url==data.src?true:false
item.url = data.src
this.$apply()
})
})
}
</script>
回调函数正常的时候 err是null值 这里要在做一层判断 我偷懒了..
loaded用来判断是否显示隐藏
这样就搞定啦 没有什么太大的难度 纯做笔记了
