vue中的图片懒加载-vueLazyLoad

vue框架中实现图片懒加载

详细地址：https://github.com/hilongjw/vue-lazyload

步骤：

1. 安装

 npm install vue-lazyload   --save

2. 在main.js文件中导入引用

import vueLazyLoad from 'vue-lazyload';

3. 安装插件

//朴素版
 Vue.use(vueLazyLoad);
 
//丰富版
Vue.use(vueLazyLoad,{
  preLoad: 1.3,
  error: require('./assets/img/common/error.png'),
  loading: require('./assets/img/common/placeholder.png'),
  attempt: 1,
  // the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']
  listenEvents: [ 'scroll' ]
});

4. 需要懒加载的图片修改:src为v-lazy

<template>
  <div class="goods-list-item" >
    <!--原来不懒加载 -->
    <!-- <img :src="showImages" @load="imgLoad" /> -->
   
    <!--现在懒加载 -->
    <img v-lazy="showImages" @load="imgLoad" />
  </div>
</template>

<script>
export default {
  name: "GoodsListItem"
}
</script>