Vue3中自定义指令,实现图片懒加载

图片懒加载

  //  自定义指令
    Vue.directive('lazy', {
      mounted (el, binding) {
        const observer = new IntersectionObserver(([{ isIntersecting }]) => {
          if (isIntersecting) {
            el.onerror = () => {
              el.src = defaultImg
            }
            el.src = binding.value
            //  不监听图片
            observer.unobserve(el)
          }
        }, {
          threshold: 0.01
        })
        // 监听
        observer.observe(el)
      }
    }