在vue3中封装自己的图片懒加载函数

实现效果

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，需要花时间慢慢完善，目前只是初步实现效果

最后

以上就是安静巨人为你收集整理的在vue3中封装自己的图片懒加载函数的全部内容，希望文章能够帮你解决在vue3中封装自己的图片懒加载函数所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。