如何优雅地实现网页载入等待画面？

[Richard14]

目前是用 vue 开发 spa ，当下在用 vue2 ，尝试在往 3 迁移。

想问一下页面载入有没有什么最佳实践推荐，希望达到的效果是，网页 html 加载第一时间就进入一个 css 渲染的等待页面，然后后台依次载入 vue 、以及 css 和 js 静态资源依赖，这时候 vue 判断全部加载完了，就把等待页面取消掉，显示正常内容。

目前 vue2 的做法，想了想感觉上似乎是把 loading 的内容写在 index.html 里？但是往这里写业务相关的内容感觉不太对呀

[ChefIsAwesome]

loading 写在 html 里，用最简单的 css 和 svg 实现，相当于原生 app 的 splash screen 。js 加载完了之后隐藏这个 splash screen 。
做按路由动态加载 js 的时候，把请求页面数据和加载 js 写在一起，并行下载。而不是等 js 加载完了，在那个 js 里头再去请求数据。要充分利用异步的特性。

[Richard14]

@ChefIsAwesome vue 是默认加载完 js 和 css 才会执行 mount 事件吗，如果不是的话如何判断 js 和 css 加载完再触发删除 splash screen 呢

[Richard14]

@ChefIsAwesome 而且还有一个疑惑是，写在 html 里的话，每次刷新页面都会不受控制地默认显示那个加载页面吧。这样的话用户就算不是第一次打开，那个加载页面也会闪一下，感觉不太优雅啊

[ch2]

@Richard14 #3 "不是第一次打开"这个概念是上了 PWA 才有的，没有上 PWA 的话没法严格监测 js 、css 文件的缓存与否。上了 PWA 你就用 service-worker 控制播放不播放动画就是了，最简单的是监听 fetch 的 url 是不是 js 文件，如果是而且 js 不在缓存里就播动画

[ChefIsAwesome]

@Richard14 你用 vue 有个初始化执行 new Vue 什么的文件，那里的代码跑起来了，不就代表 js 加载好了。
这个闪一下不是加载 HTML 这里独有的。任何有 loading 的地方都可能因为加载太快，导致闪一下。
所以 loading 一般都做个延时，等待超过 n 毫秒之后才显示。

[TMaize]

结合上面的的，可以 Mutation Observer 监听某个特定元素的出现来代表完全渲染好了