Vue3封装全局自定义指令实现图片懒加载功能。

实现

1.编写代码

创建一个文件夹：编写自定义指令

代码如下（示例）：

interface Dir {
  value: string;
}
export default {
  mounted(el: HTMLImageElement, binding: Dir) {
    console.log(el);

    const observer = new IntersectionObserver(async (entries, observer) => {
      let url = await import(
        "../images/u=2262559287,2380900417&fm=253&fmt=auto&app=138&f=JPEG.jpg"
      );

      el.src = url.default;
      if (entries[0].intersectionRatio > 0 && entries[0].isIntersecting) {
        setTimeout(() => {
          el.src = binding.value;
          observer.unobserve(el);
        }, 2000);
      }
    });

    observer.observe(el); // 开始观察元素
  },
};

2.注册为全局自定义指令

引入文件

注册

3.模板使用

<template>

  <div>
    <div v-for="item in arr">
      <img height="500" v-my-img="item" width="360" alt="" />
    </div>
  </div>
</template>

效果：我放了多张图片

总结

这样就实现了一个简单的图片懒加载功能。