性能优化——图片懒加载的实现方式

图片懒加载

vue3有提供懒加载的插件,这里我们使用VueUse hook库来自己封装一个图片懒加载的自定义指令

可以通过VueUse中的useIntersectionObserver来判断图片是否进入可视区域

useIntersectionObserver：提供对元素是否可见进行观察的功能，可用于实现懒加载等效果。

app.directive("lazy", {
  mounted(el, binding) {
    el.src = "@/assets/images/default.png"; // 使用默认图片
    const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
      if (isIntersecting) {
        el.src = binding.value;
        //在监听的图片第一次完成加载后就停止监听,否侧上滑到已经加载过图片的可视区域还会触发监听
        stop();
      }
    });
  },
});

简单水一篇

写于综合阅览室