Vue2 中自定义图片懒加载指令 v-lazy实例详解

Vue2 中自定义图片懒加载指令 v-lazy 实例详解

在 Vue2 中，我们可以使用自定义指令来实现图片懒加载功能。本篇文章将会详细讲解如何利用 v-lazy 自定义指令实现图片懒加载功能。

1. 实现步骤

以下是实现步骤：

1.1. 新建自定义指令文件

在项目中新建一个 lazy 文件夹，用来存放自定义指令。在这个文件夹下新建一个 index.js 文件，用来编写自定义指令的逻辑代码。

1.2. 编写指令代码

在 index.js 文件中编写以下代码：

import Vue from 'vue'

Vue.directive('lazy', {
  inserted: function (el) {
    el.setAttribute('data-src', el.src)
    el.setAttribute('src', 'xxx.gif')
  },
  update: function (el) {
    const rect = el.getBoundingClientRect()
    if (rect.top < window.innerHeight) {
      const dataSrc = el.getAttribute('data-src')
      el.setAttribute('src', dataSrc)
    }
  }
})

在这个指令中，我们使用了 Vue 提供的 inserted 和 update 生命周期，来处理图片的懒加载。在 inserted 生命周期中，我们将原来图片的 src 属性值设为 data-src，并将 src 属性值设为一个指定的占位图（比如 xxx.gif）。在 update 生命周期中，我们监听了 window 的滚动事件，并计算图片是否在可视范围内（使用 getBoundingClientRect() 方法），如果在可视范围内，则将 src 属性值设置为 data-src 的属性值，即原图链接地址。

1.3. 注册指令

在 Vue 的入口文件中，通过 Vue.directive() 方法注册这个自定义指令：

import Vue from 'vue'
import App from './App'
import './lazy'

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

2. 示例说明

下面是两个使用自定义指令 v-lazy 实现图片懒加载的示例。

2.1. 简单示例

在模板中使用 v-lazy 指令即可：

<template>
  <div>
    <img v-lazy="imgUrl" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgUrl: 'https://xxx.com/image.png'
    }
  }
}
</script>

在这个示例中，imgUrl 指定了原图的链接地址，当滚动到图片出现在可视范围内时，会替换为原图地址。

2.2. 使用 v-for 渲染列表

在列表页面中，我们可以使用 v-for 渲染多张图片，示例如下：

<template>
  <div>
    <img v-for="(item, index) in imgList"
         :key="index"
         v-lazy="item.url" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgList: [
        {url: 'https://xxx.com/image1.png'},
        {url: 'https://xxx.com/image2.png'},
        {url: 'https://xxx.com/image3.png'}
      ]
    }
  }
}
</script>

在这个示例中，imgList 数组包含了多张原图链接地址，使用 v-for 渲染出多张图片。当图片出现在可视范围内时，会将占位图替换为原图。

总结

以上就是利用 v-lazy 自定义指令实现图片懒加载功能的攻略。自定义指令是 Vue 强大的功能之一，可以方便地扩展 Vue 的功能，让我们写出更通用、灵活的代码。