vue使用图片懒加载

使用图片懒加载可达到只加载可视区域的图片，即滚动到可视区域时再加载图片

一、依赖

1.下载安装：npm install vue-lazyload --save-dev

2.引入 main.js：

import VueLazyload from 'vue-lazyload' 

Vue.use(VueLazyload)

// 配置项

Vue.use(VueLazyload, {

preLoad: 1.3,

error: 'dist/error.png',//加载错误时的图片

loading: 'dist/loading.gif',//加载时的图片

attempt: 1

})

二、使用

原来

<template>
  <div>
    <img :src="img" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      img: {
        img01: require("../assets/img/icon_wufu1.png"),
      },
    };
  },
};
</script>

<style>
</style>

改为（:src 改为v-lazy）：

<template>
  <div>
    <img v-lazy="img" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      img: {
        img01: require("../assets/img/icon_wufu1.png"),
      },
    };
  },
};
</script>

<style>
</style>