vue-lazyload 简单使用

安装

npm install vue-lazyload --save-dev

main.js

import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad, {
  preLoad: 1,
  error: require('./assets/imgError.png'), // 错误图片
  loading: require('./assets/imgLoading.png'), // 加载中图片
  attempt: 2,
})

index.vue

<template>
  <div>
    <div id="lazyload">
      <!-- img中使用图片懒加载。 v-lazy代替:src -->
      <div class="img">
        <div style="margin: 20px;" v-for="(item, index) in imgList" :key="index"> 
          <img v-lazy="item" alt="" style="width: 50px;">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Lazyload',
  components: {},
  props: {},
  data() {
    return {
      imgList:[
        require('../assets/weatherIcon/W0.png'),
        require('../assets/weatherIcon/W1.png'),
        require('../assets/weatherIcon/W10.png'),
        require('../assets/weatherIcon/W13.png'),
        require('../assets/weatherIcon/W14.png'),
        require('../assets/weatherIcon/W15.png'),
        require('../assets/weatherIcon/W16.png'),
        require('../assets/weatherIcon/W17.png'),
        require('../assets/weatherIcon/W18.png'),
        require('../assets/weatherIcon/W19.png'),
        require('../assets/weatherIcon/W20.png'),
        require('../assets/weatherIcon/W30.png'),
        require('../assets/weatherIcon/W31.png'),
        require('../assets/weatherIcon/W32.png'),
        require('../assets/weatherIcon/W33.png'),
        require('../assets/weatherIcon/W34.png'),
        require('../assets/weatherIcon/W35.png'),
        require('../assets/weatherIcon/W36.png'),
        require('../assets/weatherIcon/W44.png'),
        require('../assets/weatherIcon/W45.png'),
      ]
    }
  },
  filters: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {}
}
</script>

<style scoped lang="less">
#lazyload {
  background-color: #ccc;
  margin: 0 auto;
  .img {
    background-color: #ccc;
  }
}
</style>