最近有个页面进入的时候加载特别慢,所以需要加个交互,来提高用户体验。
目前在加载页面的时候,为了解决白屏时间过长的问题,目前有几种方案
1:骨架屏:目前比较流行的解决方案,像某宝等,这种方案用户体验相对好一点,
展示数据时不会太突兀
2:菊花图:直接上通过loading,因为一般都是以个圈圈在转动
3:和2差不多,不过有的人确实把loading的css,加上动画效果做得很好看
2是比较简单的,一般的样式框架都会有,
选择3的话,就需要研究下loading怎么样更好看,更符合系统的UI风格
下面说说骨架屏,目前的骨架屏有几个框架可以实现
1:vue-server-renderer
2:vue-skeleton-webpack-plugin
3:page-skeleton-webpack-plugin
这几种框架,都可能需要配置,设置样式等等,具体的话,可以看看这几个框架的github
那么除此之外还有另外一个取巧的方法,就是骨架图代替骨架屏,直接使用图片先展示,
当页面初始化完成时,再将骨架图替换点。这个方案可能需要UI画图。
具体得看自己的公司怎么实现吧。