vue-lazyload如何使用

本文小编为大家详细介绍“vue-lazyload如何使用”，内容详细，步骤清晰，细节处理妥当，希望这篇“vue-lazyload如何使用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

v-lazy

这个是Vue-Lazyload最常用的一个东西，用法也非常的简单：

<ul>
   <li v-for="img in list">
     <img v-lazy="img.src" >
   </li>
</ul>

我们现在来看看它的内部是如何实现的，首先我们进入它github上的源码可以发现它的定义：

Vue.directive('lazy', {
  bind: lazy.add.bind(lazy),
  update: lazy.update.bind(lazy),
  componentUpdated: lazy.lazyLoadHandler.bind(lazy),
  unbind: lazy.remove.bind(lazy)
})
Vue.directive('lazy-container', {
  bind: lazyContainer.bind.bind(lazyContainer),
  update: lazyContainer.update.bind(lazyContainer),
  unbind: lazyContainer.unbind.bind(lazyContainer)
})

我们可以发现它是利用vue的自定义指令实现的，vue的自定义指令可以自定义v-***之类的指令，例如你定义了Vue.directive('demo',..)那么你就可以使用v-demo这样的指令，当你使用了之后就会有对应事件供你回调，例如bind,insert,unbind等，具体可以看看下面的demo：

=> vue自定义指令(二维码)

进入demo后我们可以看到一进去就出发了bind和insert事件，然后你在输入框输入内容就会触发update和updateComponent事件，当你点击隐藏就会触发unbind事件，当你点击显示则又会触发bind和insert事件。(具体含义可以去查阅官方文档)

vue的自定义指令还可以带参数，例如vue-lazy:background-image.container='src'这样的结构，我们可以通过事件里面的binding参数获取到，例如上面的background-image可以通过binding.arg获取，.container可以通过binding.modifiers获取。

好了，讲了这么多，v-lazy的实现思路应该比较清楚了，就是内部实现了一个lazy的类，通过vue自定义指令将对象和参数传进去，然后通过检测事件(scroll等)检测位置，如果一旦这个对象出现在屏幕里就加载图片。下面看看已经实现好的demo:(包含img的v-lazy和div的v-lazy:background-image两种情况)

=> v-lazy demo(二维码)

注意：这里的v-lazy='src'中的src一定要使用data里面的变量，不能写真实的图片路径，这样会报错导致没有效果，因为vue的自定义指令必须对应data中的变量或者是数字，你写一个图片路径识别不了，我之前就是被坑了。（这里的图片fadeIn效果是在load事件之后添加了一个fadeIn的class）。

v-lazy-container

这个总体上和v-lazy差不多，也是通过自定义指令去定义的，不过v-lazy-container扫描的是内部的子元素，v-lazy-container一般使用如下:

<div v-lazy-container="{ selector: 'img' }">
   <img data-src="//domain.com/img1.jpg">
  <img data-src="//domain.com/img2.jpg">
  <img data-src="//domain.com/img3.jpg">
</div>

v-lazy-container和v-lazy不同的是，v-lazy-container是通过设置指定的子元素的data-src,data-loading,data-error去设置图片的路径的，我们看内部实现就可以看到:

const imgs = this.getImgs()
imgs.forEach(el => {
   this.lazy.add(el, assign({}, this.binding, {
     value: {
       src: 'dataset' in el ? el.dataset.src : el.getAttribute('data-src'),
       error: 'dataset' in el ? el.dataset.error : el.getAttribute('data-error'),
       loading: 'dataset' in el ? el.dataset.loading : el.getAttribute('data-loading')
     }
   }), this.vnode)
 })

下面是写好的v-lazy-container demo:

=> v-lazy-container demo(二维码)

注：v-lazy-container内部指定元素设置的data-src是图片的真实路径，不能是data变量，这个和v-lazy完全相反。

lazy-component

这个和上面的不太一样，这个严格来说不单单能够做图片懒加载，还可以做组件的懒加载，一般结构如下:

<lazy-component @show="handler">
   <img class="mini-cover" :src="img.src" width="100%" height="400">
</lazy-component>

实现方面，先用Vue.component('lazy-component',...)注册了一个全局的组件，然后通过检测位置，如果在视图范围之内就吐出它内部的内容，这个设计还是比较巧妙：

render (h) {
   if (this.show === false) {
     return h(this.tag)
   }
   return h(this.tag, null, this.$slots.default)
 },

我们一般用component都是指定一个template，它这里是利用render来自己生成内容，它这里通过一个变量show控制是否绘制内部的内容，开始的时候show为false，那么这里就绘制一个div(tag为div)，等检测（检测div）出现屏幕了，show就为true，就会绘制它内部的真实内容了（this.$slots.default就是自定义控件下面的内容）。

lazy-component作为一个组件，给外部提供了一个回调事件（show），表示已经开始load了，所以我们可以在外层监听这个事件：

load () {
   this.show = true
   this.state.loaded = true
   this.$emit('show', this)
 }

我们来看一个做好的demo，这个demo还是以实现图片懒加载为主。

=> lazy-component demo(二维码)

注:lazy-component本身不能实现图片懒加载，它只是实现组件懒加载，上面demo真正实现懒加载是因为用了v-lazy。lazy-component有一个问题，就是它的上方必须要有东西，否则可能没有效果，因为它在检测的时候有一个判断：bottom>0，所以如果你在第一个元素使用lazy-component可能没有效果。

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

读到这里，这篇“vue-lazyload如何使用”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。