Vue图片懒加载vue-lazyload插件

记录一些工作中用到的插件

图片懒加载

• 插件地址：https://github.com/hilongjw/vue-lazyload
• 1、安装插件

  npm install vue-lazyload --save-dev

• 2、main.js引入插件：

  import VueLazyload from 'vue-lazyload'
  import VueLazyLoad from 'vue-lazyload'
  Vue.use(VueLazyLoad,{
     //图片路径错误时加载图片
      error:require('common/image/aa.png'),
      //预加载图片
      loading:require('common/image/ff.png'),
  })

• vue文件中将需要懒加载的图片绑定v-bind:src 修改为v-lazy

  <img class="item-pic" v-lazy="newItem.picUrl"/>

赏

谢谢你请我吃糖果

支付宝

微信