v3自定义指令-图片懒加载

封装代码：

export const useImgLazyLoad = () => {
  // v-lazy 指令
  const vLazy = {
    // 元素加载完成时 mounted
    mounted: (el: HTMLImageElement) => {
      el.src = 'https://i.gifer.com/ZKZg.gif' // 加载占位符
      el.addEventListener('error', () => {
        el.src = 'https://img.ixintu.com/download/jpg/20200809/ccb676520c64368a579e5a585e32cdd5_512_426.jpg!con'
      })
      // 创建元素观察器
      const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          // 判断是否是当前元素，并且出现在窗口
          if (entry.target == el && entry.isIntersecting) {
            const src = el.dataset.src!;
            el.src = src;
            // el.style.backgroundImage = `url(${src})`;
            observer.unobserve(el);
          }
        });
      });
      // 观察元素
      observer.observe(el);
    },
  };
  return vLazy;
};

使用示例

<img v-lazy :data-src="item.img" class="block w-full blur-sm" alt="img">