vue——预先指定高度，进行懒加载

参考：https://www.jianshu.com/p/48ecd9ba8d74

 

页面：

<div @scroll="checkLazyLoad" ref="home" v-for="item in list">
　　<div class="gimg">
      <img v-if="item.isLoadStart" :src="item.imgpath" alt="">
      <img v-if="!item.isLoadStart" src="占位图片路径" alt="">
　　</div>
</div>

 

script:

getList(){
       let _this = this;
     _this.axios.get('***').then(function(res) {
          if (res.status == 200 && res.data.result == 0) {
            var _data = res.data.message;
            for (let i in _data.list) {
              _this.list.push(_data.list[i]);
            }
            _this.setClass();
            _this.$nextTick(() => {
              _this.checkLazyLoad();
            })
          } else {
            console.log('fail:' + res.data.error);
          }
        }).catch(function(err) {
          console.log('error:' + err);
         }) 
} ,

setClass(){
    let _this = this;
    for (var i in _this.list) {
         _this.$set(_this.list[i], 'isLoadStart', false); //初始化
    }
} ,

checkLazyLoad() { //预先一个可视区域进行懒加载
        let _this = this,
          classArr = document.getElementsByClassName('gimg'),
          home = _this.$refs.home,
          clientHeight = home.clientHeight, //可视区域的高度
          scrollTop = home.scrollTop, //滚动条与页面内容顶部的距离
          count = 0;
        for (var i = 0; i < _this.list.length; i++) {
            let obj = _this.list[i],
              toTop = classArr[i].offsetTop; //图片距离页面全内容顶部的距离
            if (toTop - scrollTop - clientHeight <= clientHeight) {　　//<=clientHeight，即预先一个可视区域
              obj.isLoadStart = true;
            }
        }
},