一、前言

• 懒加载（LazyLoad）一直是前端的优化方案之一。简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。
• 它的核心思想是：当用户想看页面某个区域时，再加载该区域的数据。这在一定程度上减轻了服务器端的压力，也加快了页面的呈现速度。
• 懒加载多用于图片，因为它属于流量的大头。最典型的懒加载实现方案是先将需要懒加载的图片的src隐藏掉，这样图片就不会下载，然后在图片需要呈现给用户时再加上src属性。

二、安装插件

npm i vue-lazyload -S

三、main.js引入

//main.js引入vue懒加载
import VueLazyload from 'vue-lazyload'

//方法一：  没有页面加载中的图片和页面图片加载错误的图片显示
// Vue.use(VueLazyload)

//方法二：  显示页面图片加载中的图片和页面图片加载错误的图片
//引入待加载图片
const loadimage = require('./assets/logo.png')
const errorimage = require('./assets/logo.png')
//注册图片懒加载  
Vue.use(VueLazyload, {
  // preLoad: 1.3,
  error: loadimage,//图片错误的替换图片路径(可以使用变量存储)
  loading: errorimage,//正在加载的图片路径(可以使用变量存储)
  // attempt: 1
})

参数选项配置说明：

四、页面使用

vue组件中使用

<template>
  <div class="box">
    <div class="cont" v-for="item, index in list" :key="index">
      <img v-lazy="item" />
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      list: [require('../assets/夕阳.jpg'), require('../assets/沙滩.jpg'), require('../assets/湖泊.jpg'),
      require('../assets/雪山.jpg'), require('../assets/夕阳.jpg'), require('../assets/沙滩.jpg'), 
      require('../assets/湖泊.jpg'), require('../assets/雪山.jpg'),]
    };
  },
}
</script>

<style lang="scss" scoped>
.box {
  width: 400px;
  margin: 0 auto;

  img {
    width: 100%;
    height: 200px;
    display: block;
  }
}
</style>

个性化使用

<template>
  <div class="box">
    <!-- <div class="cont" v-for="item, index in list" :key="index">
      <img v-lazy="item" />
    </div> -->
    <div class="cont" v-lazy-container="{ selector: 'img', error: require('../assets/logo.png'), loading: require('../assets/logo.png') }">
      <img :data-src="require('../assets/夕阳.jpg')">
      <img :data-src="require('../assets/沙滩.jpg')">
      <img :data-src="require('../assets/湖泊.jpg')">
      <img :data-src="require('../assets/雪山.jpg')">
      <img :data-src="require('../assets/夕阳.jpg')">
      <img :data-src="require('../assets/沙滩.jpg')">
      <img :data-src="require('../assets/湖泊.jpg')">
      <img :data-src="require('../assets/雪山.jpg')">
    </div>
    <!-- 或 -->
    <div class="cont" v-lazy-container="{ selector: 'img'}">
      <img :data-src="require('../assets/夕阳.jpg')" :data-error="require('../assets/logo1.png')" :data-loading="require('../assets/logo.png')">
      <img :data-src="require('../assets/沙滩.jpg')" :data-error="require('../assets/logo8.png')" :data-loading="require('../assets/logo19.png')">
      <img :data-src="require('../assets/湖泊.jpg')" :data-error="require('../assets/logo.png')" :data-loading="require('../assets/logo8.png')">
      <img :data-src="require('../assets/雪山.jpg')" :data-error="require('../assets/logo13.png')" :data-loading="require('../assets/logo.png')">
      <img :data-src="require('../assets/夕阳.jpg')" :data-error="require('../assets/logo.png')" :data-loading="require('../assets/logo352.png')">
      <img :data-src="require('../assets/沙滩.jpg')" :data-error="require('../assets/logo.png')" :data-loading="require('../assets/logo.png')">
      <img :data-src="require('../assets/湖泊.jpg')" :data-error="require('../assets/logo256.png')" :data-loading="require('../assets/logo999.png')">
      <img :data-src="require('../assets/雪山.jpg')" :data-error="require('../assets/logo.png')" :data-loading="require('../assets/logo.png')">
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      // list: [
      //   require('../assets/夕阳.jpg'), require('../assets/沙滩.jpg'),
      //   require('../assets/湖泊.jpg'), require('../assets/雪山.jpg'),
      //   require('../assets/夕阳.jpg'), require('../assets/沙滩.jpg'), 
      //   require('../assets/湖泊.jpg'), require('../assets/雪山.jpg'),
      // ]
    };
  },
}
</script>

<style lang="scss" scoped>
.box {
  width: 400px;
  margin: 0 auto;

  img {
    width: 100%;
    height: 200px;
    display: block;
  }
}
</style>