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里返回一個數組里放一組圖片進行測試