最近博客上线时发现首页的大图加载是有点慢，会出现一截一截慢慢出现的感觉，体验很不好，于是想从几个方面优化

1.图片过大

这个没什么好说的上传前压缩，或者说用压缩网站压缩一下静态图片

2.图片懒加载

适用场景为图片很多，类似瀑布流的时候，只加载视图内的图片，滚动到可视区域再加载图片

3.vue指令添加loading或者骨架屏

用自定义指令，获取dom，在未加载完成时，用loading图标顶上，用户在体验上不会有空白等待的感觉

4使用渐进式图片加载

什么是渐进式图片加载？ 首先加载一个分辨率非常低的图像,然后将高度模糊的图像作为占位符显示给客户端。加载全分辨率图像后,占位符会淡出以显示它。由此产生的过渡在眼睛上非常平滑且容易。 以vue3为例，使用vue-progressive-image插件 插件官网[matteo-gabriele.gitbook.io/vue-progres… ]

下载 npm add vue-progressive-image@beta

main.js引入

// main.js import { createApp } from "vue"; 
import App from "./App.vue"; 
import "vue-progressive-image/dist/style.css"; // <--- very important! 
createApp(App).mount("#app"); 

使用

<script setup> 
import { ProgressiveImage } from "vue-progressive-image"; 
</script> 
<template> 
<ProgressiveImage src="https://picsum.photos/id/1080/1980/1080" /> 
</template> 

效果

这是我的博客，希望大家多多留言指教 http://47.95.203.205/#/index

这是掘金另一位大佬的几个方法，感谢大佬 juejin.cn/post/721227…