Wepy 图片预加载 懒加载

学习永无止境!!!

Hello,出来混早晚是要还的..这句话我算是理解了...上周周末和女朋友忙了两天..算是把任务完成一半了 成败就看10月份了.. 加油咯

git地址 https://github.com/o2team/wxapp-img-loader

言归正传 今天学习了一把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用来判断是否显示隐藏
这样就搞定啦 没有什么太大的难度 纯做笔记了