vue的lazy-loader图片懒加载

第一步安装：

$ npm i vue-lazyload -S   或者<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>

第二步 引入：

import VueLazyLoad from 'vue-lazyload'  如果是cdn则不需要这一步 

第三步：使用/初始化

Vue.use(VueLazyload, {

  preLoad: 1.3,                //预加载图片的比例

  error: 'dist/error.png',    //图片加载失败显示的图片

  loading: 'dist/loading.gif',     //图片加载中显示的图片，防止白屏

  attempt: 5                    //一次加载几张

})

附上懒加载属性的值（转载）

提示：在脚手架开发中在mian里面引入图片可以使用require（“图片的路径”）；来代替loading的值

第四步修改页面代码用v-lazy代替 ：src

例如 ：<ul>

  <li v-for="img in list">

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

  </li>

</ul>

提示：vue文件中需要懒加载的背景图片，v-lazy:background-image="imgUrl"

<div v-lazy:background-image="imgLink"></div>