Vue图片懒加载(非插件)

1.首先准备一个图片数组,用来遍历图片

2.遍历所有的图片,src属性值设置为空,data-set的值设置为图片的路径

( 如果img标签的src属性有值的时候浏览器会发送请求 )

3.给浏览器添加滚动事件

 methods: {
    scroll () {
      const imgs = this.$refs.imgBox
      // 全屏可视区域高度
      const boxHeight = document.documentElement.clientHeight
      // 全屏滚动高度
      const boxTop = document.documentElement.scrollTop
      // 当图片距离顶部的距离不为0且小于全屏可视区域高度加上全屏滚动高度时,将data-set里面的路径赋                
         值给src
      imgs.forEach(item => {
        if (item.offsetTop < boxHeight + boxTop && item.offsetTop) {
          if (item.attributes[1].nodeValue === '') {
            item.attributes[1].nodeValue = item.attributes[2].nodeValue
          }
        }
      })
    }
  },
mounted () {
    window.addEventListener('scroll', this.scroll)
  }

分析一下那样子写的原因:

下面的图片滚动的时候下方图片需要展示出来,也就是当图片出现在我们的可视区域时显示。

如果在不滚动的情况下我们现在整个可视区域就是浏览器的一整个页面,也就是下面这一整张图片,当我们的鼠标慢慢滚动的时候,我们的滚动条距离顶部的距离也在慢慢增加,下面的元素也慢慢往上移动,元素往上移动的距离其实就是滚动条距离顶部的高度,所以我们的可视区域就是一整个屏幕的高度加上滚动条的滚动高度。

由于图片距离顶部的高度是固定的,所以当 图片距离顶部的高度 < 可视区域的高度 + 滚动条距离顶部的高度 时就说明图片已经进入了可视区域,这个时候就把data-set里面的路径赋值给src。

最终效果展示: