什么是懒加载？

当用户滚动页面到图片位置时才加载图片的一种技术，能提高网页加载性能和用户体验。

如何实现懒加载？

.通过data-xxx前缀设置我们需要的自定义属性，来进行一些数据的存放，dataset方法可以获取已定义的自定义属性进行使用。

.在进入页面的时候获取所有图片的dom节点，传到自己写的懒加载函数中去，并监听页面的滚动事件，每次触发滚动调用懒加载函数
.遍历所有图片的dom，每次触发滚动的时候对每个图片的dom进行判断，判断当前已经滚动的高度（视窗顶部到页面顶部的高度）+视窗高度是否大于等于图片到页面顶部的高度，如果符合条件的话，就把当前是占位图的src替换为data-src中的url地址，来实现懒加载。
.PS：scrollTop + clientHeight/innnerHeight = offsetTop的时候，当前视窗位置的底部正好和图片的顶部重合贴着。

<template>
  <div class="main-wrap">
    <div class="pic-list">
      <img v-for="(item,index) in shopData" :key="index"
        src="../../assets/img/picture1.jpg"
        :data-src="item.backUrl"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
 // 堆代码 duidaima.com
const shopData = ref([
  {
    name: "1",
    backUrl: "https://img.36krcdn.com/20190808/v2_1565254363234_img_jpg"
  },
  {
    name: "2",
    backUrl: "https://img.36krcdn.com/20190905/v2_1567641293753_img_png"
  },
  {
    name: "3",
    backUrl: "https://img.36krcdn.com/20190905/v2_1567640518658_img_png"
  },
  {
    name: "4",
    backUrl: "https://img.36krcdn.com/20190905/v2_1567642423719_img_000"
  },
  {
    name: "5",
    backUrl: "https://img.36krcdn.com/20190905/v2_1567642425030_img_000"
  },
  {
    name: "6",
    backUrl: "https://img.36krcdn.com/20190905/v2_1567642425101_img_000"
  },
  {
    name: "7",
    backUrl: "https://img.36krcdn.com/20190905/v2_1567642425061_img_000"
  },
  {
    name: "8",
    backUrl: "https://img.36krcdn.com/20190904/v2_1567591358070_img_jpg"
  },
  {
    name: "9",
    backUrl: "https://img.36krcdn.com/20190905/v2_1567641974410_img_000"
  },
  {
    name: "10",
    backUrl: "https://img.36krcdn.com/20190905/v2_1567641974454_img_000"
  },
])

const lazyLoad = (imgs) => {
  for(let i =0;i<imgs.length;i++){
    let imgoffsetT = imgs[i].offsetTop; //图片距离顶部的高度
    let wheight = window.innerHeight; //浏览器可视的高度
    let scrollT = document.documentElement.scrollTop; //页面被卷去的高度
    if(scrollT + wheight >= imgoffsetT){ //判断图片是否将要出现
      imgs[i].src = imgs[i].dataset.src;
    }
  }
}

onMounted(async () => {
    let imgs = document.querySelectorAll("img"); 
    lazyLoad(imgs); //初始化执行
    window.addEventListener("scroll",() => { //滚动执行
      lazyLoad(imgs);
    })
})
</script>