Wepy 图片预加载懒加载

作者: kangaroo_v | 来源:发表于2018-09-18 16:17 被阅读0次

Wepy 图片预加载懒加载
JS
图片懒加载
懒加载和预加载
图片的预加载与懒加载
javascript图片懒加载与预加载的分析
前端性能优化
Web前端性能优化（二）
web优化之懒加载和预加载
图片懒加载和预加载

学习永无止境!!!

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用来判断是否显示隐藏
这样就搞定啦没有什么太大的难度纯做笔记了