Vue 自定义指令 v-LazyLoad

拼搏现实的明天。 2022-12-29 00:20 39阅读 0赞

https://zhuanlan.zhihu.com/p/337659611

在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。

Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 `Vue.directive( id, [definition] )` 方式注册全局指令。然后在入口文件中进行 `Vue.use()` 调用。

批量注册指令，新建 `directives/index.js` 文件

import copy from './copy'
    import longpress from './longpress'
    // 自定义指令
    const directives = {
      copy,
      longpress,
      LazyLoad,
    }
    
    export default {
      install(Vue) {
        Object.keys(directives).forEach((key) => {
          Vue.directive(key, directives[key])
        })
      },
    }

在 `main.js` 引入并调用

import Vue from 'vue'
    import Directives from './utils/directives'
    Vue.use(Directives)

指令定义函数提供了几个钩子函数（可选）：

*  bind: 只调用一次，指令第一次绑定到元素时调用，可以定义一个在绑定时执行一次的初始化动作。
 *  inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
 *  update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值。
 *  componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
 *  unbind: 只调用一次， 指令与元素解绑时调用。

作者：爱前端不爱恋爱  
链接：https://zhuanlan.zhihu.com/p/337659611  
来源：知乎  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

背景：在类电商类项目，往往存在大量的图片，如 banner 广告图，菜单导航图，美团等商家列表头图等。图片众多以及图片体积过大往往会影响页面加载速度，造成不良的用户体验，所以进行图片懒加载优化势在必行。

需求：实现一个图片懒加载指令，只加载浏览器可见区域的图片。

思路：

1.  图片懒加载的原理主要是判断当前图片是否到了可视区域这一核心逻辑实现的
2.  拿到所有的图片 Dom ，遍历每个图片判断当前图片是否到了可视区范围内
3.  如果到了就设置图片的 `src` 属性，否则显示默认图片

图片懒加载有两种方式可以实现，一是绑定 `srcoll` 事件进行监听，二是使用 `IntersectionObserver` 判断图片是否到了可视区域，但是有浏览器兼容性问题。

下面封装一个懒加载指令兼容两种方法，判断浏览器是否支持 `IntersectionObserver` API，如果支持就使用 `IntersectionObserver` 实现懒加载，否则则使用 `srcoll` 事件监听 + 节流的方法实现。

const LazyLoad = {
      // install方法
      install(Vue, options) {
        const defaultSrc = options.default
        Vue.directive('lazy', {
          bind(el, binding) {
            LazyLoad.init(el, binding.value, defaultSrc)
          },
          inserted(el) {
            if (IntersectionObserver) {
              LazyLoad.observe(el)
            } else {
              LazyLoad.listenerScroll(el)
            }
          },
        })
      },
      // 初始化
      init(el, val, def) {
        el.setAttribute('data-src', val)
        el.setAttribute('src', def)
      },
      // 利用IntersectionObserver监听el
      observe(el) {
        var io = new IntersectionObserver((entries) => {
          const realSrc = el.dataset.src
          if (entries[0].isIntersecting) {
            if (realSrc) {
              el.src = realSrc
              el.removeAttribute('data-src')
            }
          }
        })
        io.observe(el)
      },
      // 监听scroll事件
      listenerScroll(el) {
        const handler = LazyLoad.throttle(LazyLoad.load, 300)
        LazyLoad.load(el)
        window.addEventListener('scroll', () => {
          handler(el)
        })
      },
      // 加载真实图片
      load(el) {
        const windowHeight = document.documentElement.clientHeight
        const elTop = el.getBoundingClientRect().top
        const elBtm = el.getBoundingClientRect().bottom
        const realSrc = el.dataset.src
        if (elTop - windowHeight < 0 && elBtm > 0) {
          if (realSrc) {
            el.src = realSrc
            el.removeAttribute('data-src')
          }
        }
      },
      // 节流
      throttle(fn, delay) {
        let timer
        let prevTime
        return function (...args) {
          const currTime = Date.now()
          const context = this
          if (!prevTime) prevTime = currTime
          clearTimeout(timer)
    
          if (currTime - prevTime > delay) {
            prevTime = currTime
            fn.apply(context, args)
            clearTimeout(timer)
            return
          }
    
          timer = setTimeout(function () {
            prevTime = Date.now()
            timer = null
            fn.apply(context, args)
          }, delay)
        }
      },
    }
    
    export default LazyLoad

使用，将组件内 标签的 `src` 换成 `v-LazyLoad`