详解JS如何处理可视区域图片懒加载技巧

el.offsetTop - document.documentElement.scrollTop <=  window.innerHeight

function isInViewPortOfOne (el) {
    // viewPortHeight 兼容所有浏览器写法
    const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight 
    const offsetTop = el.offsetTop
    const scrollTop = document.documentElement.scrollTop
    const top = offsetTop - scrollTop
    return top <= viewPortHeight
}

const target = document.querySelector('.target');
const clientRect = target.getBoundingClientRect();
console.log(clientRect);
// {
//   bottom: 556.21875,
//   height: 393.59375,
//   left: 333,
//   right: 1017,
//   top: 162.625,
//   width: 684
// }

function isInViewPort(element) {
  const viewWidth = window.innerWidth || document.documentElement.clientWidth;
  const viewHeight = window.innerHeight || document.documentElement.clientHeight;
  const {
    top,
    right,
    bottom,
    left,
  } = element.getBoundingClientRect();
  return (
    top >= 0 &&
    left >= 0 &&
    right <= viewWidth &&
    bottom <= viewHeight
  );
}

// 列表数据
 // 行
<div v-for="(row, indexs) in items" :key="indexs" class="rowList" >
  <div v-for="(column, index) in coluData" :key="index" class="coluList">   // 列
    <div class="images">
       <img class="lazyImg" slot="reference" :src="logo" :data-src="row[column.columnName]" alt="" />
    </div>
  </div>
</div>
// 在生命周期中定义滚动事件
    mounted() {
      window.addEventListener('scroll', this.lazyload)
    },
    destroyed() {
      window.removeEventListener('scroll', this.lazyload)
    },
    mothods:{
      getListData(){
          this.items = getData // getdata请求到的列表数据
          this.$nextTick(()=>{
              this.lazyload()
          })
      },
      // 图片懒加载
      lazyload(){
        let n = 0;
        let img = document.getElementsByClassName('lazyImg')
        for(let i = n; i < img.length; i++){
          if(this.isInViewPort(img[i])){     
            img[i].src = img[i].getAttribute("data-src");
            n = i + 1;
          }
        }
      },
      isInViewPort(element) {
        const viewWidth = window.innerWidth || document.documentElement.clientWidth;
        const viewHeight = window.innerHeight || document.documentElement.clientHeight;
        const {
          top,
          right,
          bottom,
          left,
        } = element.getBoundingClientRect();
        return (
          top >= 0 &&
          left >= 0 &&
          right <= viewWidth &&
          bottom <= viewHeight
        );
      },
}