Vue中网络图片懒加载工具

import type { App, DirectiveBinding } from 'vue'

const vLazy = (observer: IntersectionObserver) => {
  return {
    beforeMount: (el: HTMLImageElement, binding: DirectiveBinding) => {
      el.classList.add('op-lazyload')
      el.dataset.lazyKey = binding.value
      observer.observe(el)
    },
  }
}

const lazyPlugin = {
  install(app: App) {
    //一种方法，以异步地观察目标元素与祖先元素或与顶级视口相交时的更改。
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((item) => {
          if (item.isIntersecting) {
            // 开始加载图片，把 data-origin 的值放到 src
            const el = item.target as HTMLImageElement
            el.src = el.dataset.lazyKey as string
            el.classList.remove('op-lazyload')
            // 停止监听
            observer.unobserve(el)
          }
        })
      },
      {
        // 交叉视图的 100ps，才开始派发事件
        rootMargin: '0px 0px -100px 0px',
      }
    )
    //添加一个名字叫lazy的指令 // <img v-lazy="" />
    app.directive('lazy', vLazy(observer))
  },
}

export default lazyPlugin
//第二个参数是 触发这个指令时要做的逻辑，可以在一些生命周期函数中执行内容，
//本文是在beforeMount函数添加逻辑
// export declare interface ObjectDirective<T = any, V = any> {
//   created?: DirectiveHook<T, null, V>;
//   beforeMount?: DirectiveHook<T, null, V>;
//   mounted?: DirectiveHook<T, null, V>;
//   beforeUpdate?: DirectiveHook<T, VNode<any, T>, V>;
//   updated?: DirectiveHook<T, VNode<any, T>, V>;
//   beforeUnmount?: DirectiveHook<T, null, V>;
//   unmounted?: DirectiveHook<T, null, V>;
//   getSSRProps?: SSRDirectiveHook;
//   deep?: boolean;
// }