实现效果
export const lazyImgs = (img: any) => {
// --
const fn = (entry: any) => {
entry.forEach((imgs: any) => {
if (imgs.isIntersecting) {
imgs.target.children[0].src = imgs.target.dataset.src;
IO.unobserve(imgs.target.children[0]);
}
});
};
const IO = new IntersectionObserver(fn, {});
Array.from(img.value.children).forEach((element: any) => {
IO.observe(element);
});
};
代码--使用在vant组件上,需要ref需要绑定父元素
<div class="imgs" ref="img">
<van-image
v-for="(imgs, index) in item.coverUrl"
:key="index"
src="'imgs1'"
:data-src="imgs"
lazy-load
>
</van-image>
</div>
使用
// 获DOM
const img = ref();
onMounted(() => {
// 调用
lazyImgs(img);
});
有待完善,类型直接设置为any,需要花时间慢慢完善,目前只是初步实现效果