前端优化方案——图片懒加载

图片懒加载旨在当用户浏览页面时，图片进入视图才开始加载，避免了大量图片并发请求，造成资源浪费

使用vue-lazyload插件：

npm istanll vue-lazyload

在main.js中引入：

import VueLazyLoad from "vue-lazyload";

const app = createApp(App);
app.use(VueLazyLoad, {
  error: "/images/error.svg", // 加载错误的图片
  loading: "/images/loading3.gif", // 加载时的图片
});

然后将img标签的src属性切换为v-lazy即可生效，效果如下：

当图片进入视图时才开始加载，如果加载失败会显示你设置的 error 图片，该方法适用与vue项目，非常简单便捷