这个API可以用于图片懒加载或者加载更多，主要是观察一个元素是否和目标元素交叉

<template><div class="box"><img ref="img" :src="getAssetsFile('test.png')" alt="" v-for="(item) in 56" :key="item"></div>
</template>
<script setup lang='ts'>
import { getAssetsFile } from "@/utils/tools";
import { ref, onMounted } from 'vue';
const img = ref();
let obs = new IntersectionObserver((res) => {// 相交时会触发这个函数，res是整个观察的对象，包括了相交和未相交的let intersect = res.filter((e:any) =>{return e.isIntersecting;  //过滤出相交的元素});intersect.forEach((e:any) =>{e.target.src = "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg";obs.unobserve(e.target);  //取消监听});
}, {root:null,  //观察者要相交的元素，null就是视口，也可以是其父元素和祖先元素rootMargin:"0",  //不常用，root为null的时候设置会报错，距离root元素多少px的时候会触发回调函数threshold: 0, //观察者和root元素重叠的比例,值为0-1范围，0就是刚刚重叠，1就是完全重叠
})
onMounted(() => {img.value.forEach((e:any) =>{obs.observe(e);  //建立监听});
});</script>
<style scoped lang='scss'>
.box {width: 100%;height: 100%;display: flex;justify-content: space-between;flex-wrap: wrap;img {width: 255px;height: 300px;margin-bottom: 20px;}
}
</style>