vue-lazyload的使用

1.下载依赖

npm install vue-lazyload --save

2.引入

import Vue from 'vue'
import App from '@/App'
import VueLazyload from 'vue-lazyload'

3.配置

Vue.use(VueLazyload, {
error: 'dist/error.png',//这个是请求失败后显示的图片
loading: 'dist/loading.gif',//这个是加载的loading过渡效果
try: 2 // 这个是加载图片数量
})

4.组件使用

<template>
  <div class="lazyLoad">
    <ul id="container">
      <li v-for="img in arr">
        <img v-lazy="img.thumbnail_pic_s">
      </li>
    </ul>
  </div>
</template>
 
<script>
  export default({
    name:"lazyLoad",
    data(){
      return{
        arr:[]
      }
    },
    mounted:function(){
      this.$http.get('/api/data').then(res=>{
        this.arr=res.data.data;
        console.log(this.data)
      })
    },
  })
</script>
 
<style scoped>
li{
  list-style: none
}
</style>

注意:这里我用的是mock模拟请求数据后的图片,也可以直接在data里返回一个数组里放一组图片进行测试