vue网页图片加载较慢的问题

使用vue做的官网页面，所有的图片都是从上往下慢慢加载出来的，所有的大图片最大有1.8MB（且进行了图片压缩的前提下），我需要实现图片直接出来的效果，列如易来官网的效果

1. 我采用了img标签的onload想着在加载后再执行比较大的图片，运行后onload一直在执行找不到问题之处；

onLoadImg: function(imgSrc) { //加载完成时触发 console.log('infos:: ',imgSrc); return 'this.src='+'"'+imgSrc+'";this.οnlοad=null'; }, 2. 我也采用了图片转base64的方式，但页面大图片太多，每个地方都使用的话，网页就会加载很慢；

一般访问者带宽没问题，快慢取决于服务器带宽，如果你带宽才5Mb/s，那么单下载一张1.8MB图片就的3s，如果服务器带宽更加小，图片更加多，第一次加载完至少的10s以上，如果还有其他人同时访问会更加久。

解决办法是页面不要直接显示原始图片，而是显示缩略图，点击后后再显示大图什么的。转base64体积会变更加大，比原来的大33%左右，base64不是解决办法。压缩图片或者加大服务器带宽

懒加载

提供下面的思路方法：

1.如果是本地静态资源图片的话，可以用webpack打包工具压缩图片或者压缩图片（ https://tinypng.com/）网站进行压缩；
2.如果是网络图片的话，则可以使用webp图片格式，图片体积至少缩小了40%以上
3.也可以懒加载或者预加载，还可以进行分页加载

三种方法，随意
1.如果是本地静态资源图片的话，可以用webpack打包工具压缩图片或者压缩图片（ https://tinypng.com/）网站进行压缩；
2.如果是网络图片的话，则可以使用webp图片格式，图片体积至少缩小了40%以上，缺点是部分浏览器不兼容；
3.也可以懒加载或者预加载，一般适用于瀑布流滚动的场景，不过我的场景是分页加载的，所以性价比较低。

可以用组件。懒加载等等

给你提供三个思路：
1、增加服务器带宽，这个是最有效的办法。
2、使用插件压缩图片，很多图片压缩后可以比原先小一大半。
3、使用组件进行懒加载，优化显示效果。

使用vue3-lazy懒加载方式,你如果资金充足的话，可以考虑购买cdn服务、增加网络带宽的方式。

1、导入依赖

npm install vue3-lazy-S

2、main.js配置

import { createApp } from "vue";

import App from "./App.vue";

// 懒加载

import lazyPlugin from "vue3-lazy";

const app = createApp(App);

// 懒加载

app.use(lazyPlugin, {

  loading: require("./assets/jiazai.png"), // 加载时默认图片

  error: require("./assets/cuo.png"), // 加载失败时默认图片

});

app.mount("#app");

3、组件方式使用

<img v-lazy="想要加载的图片" >

图片这么大...你先把图片转成webp啊...
下个graphicmagick软件，可以批量转

通过一下优化,应该可以达到你想要的效果
1.图片需要压缩
2.小于1M的通过webpack 打包成base64 直接展示
3.大于1M的通过 csdn加速展示
4.提高下载的宽带
5.通过懒加载优化