图片懒加载

 在项目中经常会加载大量的图片，加载这些图片非常消耗页面响应速度，使用图片懒加载可以很好解决这个问题，

定义一个函数然后导出

使用 IntersectionObserver方法监听图片是否与视口交叉，交叉用自定义的图片地址替换原来的src

export default function(imgs){
   // 图片懒加载
   var ob = new IntersectionObserver((entries)=>{
    // console.log('交叉后运行');
    console.log(entries);
    for(let entry of entries){
      if(entry.isIntersecting){
        // console.log('交叉');
        let img = entry.target
        img.src = img.dataset.src
      }
    }
  },{
    root:null,//和谁交叉，默认null(视口)，只可填父级元素
    rootMargin:"0%",//扩充交叉范围，必须百分比字符串
    threshold:0//交叉阈值，范围0-1，（0.5表示观察的元素一半进入视口才会触发）
  })
  imgs.forEach((img)=>{
    ob.observe(img)
  })
}

 vue组件使用可直接导入方法使用

Lorem Picsum 随机图库

<template>
   <div class="imgWrap">
    <img src="../assets/three.png" :data-src="'https://picsum.photos/300/500?r=' + id" alt=""  v-for="id in num" key="id" ref="imgs">
   </div>
</template>
<script setup>
import { ref ,onMounted} from 'vue'
import lazyimg from '../imagelazy'
let num = ref(100)
let imgs = ref(null)
onMounted(()=>{
  // 图片懒加载
  lazyimg(imgs.value)
})



</script>
<style scoped>
.read-the-docs {
  color: #888;
}
img{
  width: 200px;
  height: 160px;
}
.imgWrap{
  width: 820px;
  margin: 0 auto;
}

</style>