一、图片懒加载的好处

1. 对视图外的图片不进行加载，当页面的滚动时，对进入视图区的图片进行加载
   减少 http 请求次数，节省流量，减小服务器压力
2. 加载时 loading图 占位，加载失败 error图 占位，加载成功显示请求图片
   提升用户体验

二、实现图片懒加载

1. 安装依赖（注意版本）

vue2 使用低版本，vue3 直接安装最新版本

npm i vue-lazyload@1.3.4 -S

2. 在 main.js 入口文件中注册

import VueLazyload from "vue-lazyload";
const loadimage = require("./assets/images/loading.gif");
const errorimage = require("./assets/images/error.gif");
Vue.use(VueLazyload, {
  preLoad: 1,             // 预加载高度比例，默认 1.3
  error: errorimage,      // 加载失败时图像的src
  loading: loadimage,     // 正在加载时图像的src
  attempt: 1,             // 尝试次数
});

3. 在组件中使用

<template>
  <div class="home">
    <h1>图片懒加载</h1>
    <div v-for="(item, index) in list" :key="index">
      <img v-lazy="item.src" style="height: 420px; width: 420px" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      list: [
        {
          src: "https://img0.baidu.com/it/u=394333074,1787648005&fm=253&fmt=auto&app=138&f=JPEG?w=636&h=500",
        },
        {
          src: "https://img2.baidu.com/it/u=683632201,378173214&fm=253&fmt=auto&app=138&f=JPG?w=1118&h=410",
        },
        {
          src: "https://img1.baidu.com/it/u=945585991,3392397995&fm=253&fmt=auto&app=138&f=JPEG?w=605&h=500",
        },
        {
          src: "https://img2.baidu.com/it/u=2751893563,239775612&fm=253&fmt=auto&app=138&f=PNG?w=622&h=500",
        },
        {
          src: "https://img2.baidu.com/it/u=2933650591,4207845479&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=501",
        },
      ],
    };
  },
};
</script>