自定义 图片懒加载-指令

/*
 * @Author: yintao
 * @Date: 2023-09-20 16:34:19
 * @LastEditors: yintao
 * @LastEditTime: 2023-09-21 13:56:11
 * @Description: 自定义 图片懒加载-指令
 */

// 定义自定义指令
const defineDirective = (app: any) => {
  // imgLazy指令名称
  app.directive('imgLazy', {
    mounted(el: HTMLImageElement, bindings: any) {
      // el表示使用指令的DOM元素
      // bindings表示指令相关的信息是一个对象 如v-lazy="xxx",bindlings即是xxx对应的内容
      // 指令的功能：实现图片的懒加载
      // 1、监听图片是否进入可视区
      const oberver = new IntersectionObserver(([{ isIntersecting }]) => {
        // true；进入可视区域，false：未进入可视区域
        if (isIntersecting) {
          // 1、给图片的src属性赋值图片的地址
          el.src = bindings.value
          // 2、取消图片的监听，默认是会一直监听的，如果不取消。就会一直执行
          oberver.unobserve(el)
          // 3、加载的图片失败了，显示默认的图片地址
          el.onerror = () => {
            el.src =
              'https://img-blog.csdnimg.cn/img_convert/32bbcc4fe8a7f33a88ea7579fe052087.png'
          }
        }
      })
      // 监听dom元素
      oberver.observe(el)
    }
  })
}
export default {
  install(app: any) {
    // 自定义指令
    defineDirective(app)
  }
}