vue图片懒加载(非插件)

图片懒加载就是前端进行的一个性能优化处理

1.首先准备一个div用来循环img的
2.给img的src设置一个loading.gif的图片，再给一个data-src设置成图片路径
(这里我在写的时候发现，如果给src设置的值为空字符串，他每次就会直接把值赋值给src,就没有性能优化的效果了)

 <div class="aaa">
    <!-- 存放照片的div -->
    <div class="layout" ref="allImgRef">
      <!-- 循环生成的img -->
      <div v-for="(item, index) in data" :key="index" ref="imgRef" class="a">
        <img :src="item.src" :data-src="item.value" />
      </div>
    </div>
  </div>

3.data数据
如果我这里的src为 ‘’, 就会出现在页面渲染时，直接把所有照片都请求完这种情况

 data () {
    return {
      data: [
        {
          src: require('../../assets/1.gif'),
          value: require('../../assets/1.jpg')
        },
        {
          src: require('../../assets/1.gif'),
          value: require('../../assets/2.jpg')
        },
        {
          src: require('../../assets/1.gif'),
          value: require('../../assets/3.jpg')
        },
        {
          src: require('../../assets/1.gif'),
          value: require('../../assets/4.jpg')
        },
        {
          src: require('../../assets/1.gif'),
          value: require('../../assets/5.jpg')
        },
        {
          src: require('../../assets/1.gif'),
          value: require('../../assets/6.png')
        },
        {
          src: require('../../assets/1.gif'),
          value: require('../../assets/7.jpg')
        }
      ]
    }

4.最重要的流程

 methods: {
    scroll () {
      // 至于这里为什么套了两层setTimeout，因为我再拿取这些高度的时候，页面还未完全渲染完毕.
      setTimeout(() => {
        // 获取数据的长度，后面循环需要用到
        const length = this.data.length
        // 获取存放img的div盒子的clientHeight
        const clientHeight = this.$refs.allImgRef.clientHeight
        // 获取存放img的div盒子的scrollTop
        const scrollTop = this.$refs.allImgRef.scrollTop
        // 循环判断
        for (let i = 0; i < length; i++) {
          setTimeout(() => {
            // 拿到照片距离父级顶部的距离，offsetTop（固定不变的值）
            const imgOffsetTop = this.$refs.imgRef[i].offsetTop
            if (imgOffsetTop < clientHeight + scrollTop) {
              this.data[i].src = this.data[i].value
            }
          }, 10)
        }
      }, 10)
    }
  },
  mounted () {
    // 初次进入页面没有滚动，需要自行调用一次
    this.scroll()
    // 添加scroll滚动事件
    window.addEventListener('scroll', this.scroll, true)
  }

5.css样式

<style lang="less" scoped>
.aaa {
  height: 100vh;
  overflow: hidden;
}
.layout {
  height: 100vh;
  width: 50vw;
  overflow-y: scroll;
  background-color: lightblue;
  img {
    width: 100%;
  }
}
</style>

描述一下整个流程：
首先我们需要拿到存放img的整个div标签的clientHeight高度，和滚动条滚动的高度scrollTop，还需要拿到每个img距离父级div最顶部的距离也就是offsetTop，这个值在页面初始化时，就开始是固定不变的，所以就可以通过这个距离进行判断，是否出现在可见区域，（如果对这几个高度不理解的，可以看我先前发的一篇，关于这些高度的解说~）

最后附上一个效果图（注意观看右边的网络请求）