vue2 实现图片懒加载

一、图片懒加载的好处

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

二、实现图片懒加载

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

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

npm i [email protected] -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. 在组件中使用