vue3自定义图片懒加载指令

首先我们需要了解：

IntersectionObserver API

IntersectionObserver是浏览器原生提供的构造函数，用于查看某个元素是否进入了视口(viewport)，用户能否看到该元素

const observer = new IntersectionObserver(callback, option)

目标元素的可见性发生变化时(callback被观察dom进入可视区离开可视区都会触发)，会触发callback回调函数，我们要用到callback参数中isIntersecting属性(目标元素是否与视口（或根元素）交叉)

详情可参考：(IntersectionObserver API详解_

IntersectionObserver 交叉观察器 - 简书 (jianshu.com)

IntersectionObserver

浏览器的5种观察器

 app.directive

自定义全局指令，它有两种写法

// 注册（对象形式的指令）
// 所有生命周期都可
app.directive('my-directive', {
  /* 自定义指令钩子 */
})

// 注册（函数形式的指令）
// 固定只在2个生命周期上触发, mounted 和 updated 
app.directive('my-directive', () => {
  /* ... */
})

 vue中install方法

可供我们开发新的自定义指令跟全局注册组件，第一个参数是vue的构造器，第二个参数是可选的选项对象

然后再开始编写扩展指令之图片懒加载指令

export default {
  install (app) {
    app.component(XtxSkeleton.name, XtxSkeleton)
    app.component(XtxCarousel.name, XtxCarousel)
+    defineDirective(app)
  }
}

import defaultImg from '@/assets/images/200.png'
// 扩展指令
const defineDirective = (app) => {
    // 图片懒加载
    app.directive('lazyload', {
        mounted(el, binding) {
            const observer = new IntersectionObserver(([{ isIntersecting }]) => {
                if (isIntersecting) {
                    // 停止观察
                    observer.unobserve(el)
                    el.onerror = () => {
                        // 图片加载失败 设置默认图
                        el.src = defaultImg
                    }
                    // binding 是对象，.value就是绑定指令的值
                    el.src = binding.value
                }
            }, {
                //目标元素和根元素相交部分的比例达到该值的时候，
                //callback 函数将会被执行
                threshold: 0.01
            })
            // 开始观察
            observer.observe(el)
        }
    })
}

使用扩展的图片懒加载指令：