vue 图片懒加载 vue-lazyload

来源：cnblogs　　作者：huangenai　　时间：2018/10/8 8:47:14　　对本文有异议

在项目中，如果出现大图一时半会加载不出来的情况确实很丑。如果是那种没有给定宽高靠图片撑起来的等图片加载出来再把内容挤下去的用户体验效果非常差。

在vue中使用vue-lazyload可以实现图片懒加载

安装

npm install vue-lazyload --save

引用

main.js

import vueLazy from 'vue-lazyload'
Vue.use(vueLazy)

index.vue

<template>
    <div>
        <img v-lazy="imgObj"/>
        <img v-lazy="imgUrl"/>
    </div>
</template>
 
<script>
export default {
  name: 'index',
  data () {
    return {
      imgObj: {
        src: require('https://images2015.cnblogs.com/blog/4849/201612/4849-20161223230947182-2121200217.png'),
        error: require('../assets/error.jpeg'),
        loading: require('../assets/loading.gif')
      },
      imgUrl: 'http://xx.com/logo.png'
    }
  }
}
</script>
 
<style scoped>
</style>

还有就是全局配置的

main.js

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
Vue.use(VueLazyload, {
  preLoad: 1.3,//
  error: '../assets/error.png',
  loading: '../assets/loading.gif',
  attempt: 1
})