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>