vue 判断页面加载完成_vue之骨架屏踩坑之路

vue的首屏优化方式有很多种 骨架屏就是其中之一

作为一个前端开发 用户体验感是很重要的 关于页面的loading状态的展示，目前主流的主要有loading图和进度条两种 现今使用骨架屏的也越来越多

首先 何为“骨架屏”在进入首次页面加载数据之前都会有一段空白时间 这段空白时间没有出现任何东西 会造成用户体验的不好 “骨架屏”就是在页面内容未加载完成的时候，先使用一些图形进行占位，待内容加载完成之后再把它替换掉

常见的骨架屏

废话不多说 首先搭建一个vue-cli的项目 vue init webpack demo

当用npm run dev 运行起来之后 可直接在入口html文件的div#app里面随便写点什么，然后打开chrome的开发者工具，在Network里面找到throttle功能，调节网速为“Slow 3G”，刷新页面，就会看到你先前写的内容会首先显示出来，待js加载完了才会替换为原本要展示的内容 例：

先显示的内容为直接写在html页面的内容 js加载完后就替换掉了