Vue使用懒加载加载图片

  相信大家都知道，浏览器渲染会直接将页面中的所有元素都直接渲染出来，如果某个页面的图片比较多，而且网络不太好时，整个页面的加载就会很慢，为了提高性能，Vue中提供了一个插件 vue-lazyload 来实现图片的懒加载，下面是具体的使用步骤。

1.安装插件

npm install vue-lazyload --save-dev

2.在入口函数main.js中引用插件

import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad)

3.使用v-lazy属性设置图片懒加载

<img v-lazy="item.src">

如果图片的地址是通过v-for循环获取
常规的src是需要结合v-bind指令才能获取图片的地址；
但是懒加载，直接通过v-lazy指令即可，不需要结合v-bind使用

//动态生成常规图片
<img :src="item.src">

//动态生成懒加载的图片
<img v-lazy="item.src">