Less is More
0%

Vue实现图片懒加载的自定义指令v-lazy

发表于 更新于 分类于 Disqus：

最近写移动端的项目，需要用到图片懒加载的功能。试用了一下组件库 Mint-UI 的v-lazy指令，发现有一些 bug，于是自己手写了一个。到目前为止都使用良好。

用到的钩子函数

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。

用到的钩子函数参数

  • el：指令所绑定的元素，可以用来直接操作 DOM 。
  • binding：一个对象，包含以下属性：
    • name：指令名，不包括 v- 前缀。
    • value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
    • 其他属性省略

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 注册一个全局自定义指令 `v-lazy`用于图片懒加载
// 在后台创建一个图片元素用于加载图片，当图片完全加载后，再去显示图片
import loading from './assets/loading.jpg'

Vue.directive('lazy', (el, binding) => {
  const backImg = document.createElement('img')
  el.setAttribute('lazy', 'loading')
  el.src = loading
  backImg.onload = () => {
    el.setAttribute('lazy', 'loaded')
    el.src = binding.value
  }
  backImg.src = binding.value
})

这是一种简写的方式，会将这个函数同时绑定在bind和update上。

使用

1
<img alt class="cover-img" v-lazy="item">

参数说明

v-lazy='item'：item是要加载的图片的 src

如果要设置图片加载时的样式，使用属性选择器img[lazy=loading]即可。如下：

1
2
3
4
img[lazy='loading'] {
  width: 1.4rem;
  height: 1.4rem;
}

参考资料