vue中图片懒加载的实现

在项目如果要实现图片懒加载，大概的思路是这样的

1.要知道图片有没有出现在视口当中

2.怎么样控制图片的加载

如果不使用自己用原生写，很麻烦，要计算图片距离视口距离，视口高度，vue有一个好用的插件叫做vue-lazyload，使用它实现图片懒加载，快捷简单！

安装 vue-lazyload插件

1. 通过npm安装插件

    npm install vue-lazyload --save-dev
   

2.在main.js里面

    import vueLazyload from 'vue-lazyload'
    Vue.use(VueLazyload,{
    preLoad:1.3,  //预加载高度
    error:'a.png'  //图片路径错误时加载高度
    loading:'b.png' //预加载图片
    attempt:1  //图片加载数量
    })
    

3.在页面中使用

img中使用图片懒加载。 v-lazy代替v-bind:src

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

是不是很简单