Vue自定义图片懒加载指令v-lazyload详解

当我们访问一个页面时，图片数量很多，如果立即全部加载会占用很多带宽和资源，降低用户体验，所以利用图片懒加载技术可以解决这个问题。Vue自定义指令v-lazyload实现图片的懒加载效果。

1. v-lazyload指令的原理

该指令的原理是在图片的可见区域内，进行异步加载图片，只有当图片出现在可见区域内时才加载，利用了IntersectionObserverAPI可以监听元素是否进入和离开可视区域来处理图片的加载逻辑。

2. v-lazyload指令的使用

2.1 全局注册

// main.js
import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

new Vue({
  render: h => h(App),
}).$mount('#app')

使用该方式后，可以在应用的任意位置使用v-lazyload指令，比如：

<template>
  <div>
    <img v-lazyload="imgUrl" alt="图片">
  </div>
</template>

2.2 局部注册

<template>
  <div>
    <img v-lazyload.custom="imgUrl" alt="图片">
  </div>
</template>

<script>
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  lazyComponent: true,
  observer: false,
  observerOptions: {
    rootMargin: '10px',
    threshold: [0, 0.5],
    delay: 100,
  },
  preLoad: 1.3,
  error: 'error.jpg',
  loading: 'loading.gif',
})

export default {
  directives: {
    lazyload: VueLazyload.lazyDirective,
  },
}
</script>

这里使用了局部注册，通过directives注册了局部指令lazyload，然后在使用时，使用修饰符.custom来指定使用该指令。此外，还可以选择开启哪些特性，例如开启lazyComponent、关闭observer等。

3. 示例说明

3.1 示例1

在这个示例中，我们将使用全局注册的方式，加载一个图片，代码如下：

<template>
  <div>
    <img v-lazyload="imgUrl" alt="图片">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgUrl: 'https://picsum.photos/id/237/200',
    }
  },
}
</script>

这里使用了picsum.photos提供的服务，用于随机生成一张图片，指定了图片的id和图片的大小，并将结果赋值给imgUrl。使用v-lazyload指令指定该img元素的src为imgUrl即可实现图片懒加载效果，当该图片元素在视口内时，图片会异步加载，直到加载完成后显示在页面上。

3.2 示例2

在这个示例中，我们将使用局部注册的方式，并定制了一些属性，代码如下：

<template>
  <div>
    <img v-lazyload.myCustomDirective="imgUrl" alt="图片">
  </div>
</template>

<script>
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'error.jpg',
  loading: 'loading.gif',
})

export default {
  directives: {
    myCustomDirective: VueLazyload.lazyDirective,
  },
  data() {
    return {
      imgUrl: 'https://picsum.photos/id/238/200',
    }
  },
}
</script>

这里我们使用了自定义指令，将v-lazyload修改为了myCustomDirective，通过directives注册该指令，另外我们还定制了一些属性，比如预加载的高度、错误图片、过渡图片等。

以上两个示例仅是v-lazyload指令的一部分功能演示，你可以根据自己的需求进行相关属性和修饰符的设置，以达到最佳的图片懒加载体验效果。