1.vue3自定义指令图片懒加载

vue3自定义指令图片懒加载

效果：当滚动到可视区域图片加载

步骤：

1）注册全局自定义指令

2）获取可视区域，当可视区域为true是，el.src=binding.value

当加载失败时，el.src=默认的加载图片

3)给Dom绑定自定义指令

/**
 * vue插件：注册全局指令
 */
// 导入监控方法
import { useIntersectionObserver } from '@vueuse/core'
import Def from '@/assets/images/load.gif'
export default {
  install (app) {
    console.log('指令：', app)
    app.directive('imglazy', {
      // vue2: inserted → vue3：mounted
      /**
       *
       * @param {*} el img的dom对象
       * @param {*} binding.value 指令绑定的图片地址
       */
      mounted (el, binding) {
        // console.log('执行：', el, binding)
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }]) => {
            // console.log('监控回调函数：', isIntersecting)
            if (isIntersecting) {
              el.src = Def
              // console.log('进入可视区了，发请求')
              // 看效果，可以延时（实际开发不要加）
              setTimeout(() => {
                el.src = binding.value
              }, 2000)
              // 加载失败
              el.onerror = () => {
                // 图片加载失败，显示默认图片
                el.src = Def
              }
              // 关闭监控
              stop()
            }
          },
          {
            threshold: 0 // 进入后立马触发
          }
        )
      }
    })
  }
}