骨架屏

585 阅读1分钟

最近有个页面进入的时候加载特别慢,所以需要加个交互,来提高用户体验。

目前在加载页面的时候,为了解决白屏时间过长的问题,目前有几种方案

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画图。

具体得看自己的公司怎么实现吧。