博客建设 ·

为你的Web程序加个启动画面

.Net开发者一定熟悉下面这个画面:

这就是宇宙第一IDE Visual Studio的启动画面,学名叫Splash Screen(或者Splash Window)。同样,Javar们一定对Eclipse的启动画面不会陌生。不只是IDE,很多桌面程序都会有这个Splash 窗口,在程序进行初始化时显示。这方面做得最赞的非Adobe旗下的设计类软件莫数了,毕竟是搞艺术出身的啊。博主从PS 8.0用起,每次升级新版本激动的不是新功能,首先是激动新的启动画面。下图是最新CC版PS的Splash Screen。视觉效果震撼的一逼。。张牙舞爪的,无出其右。

启动画面也不是桌面程序所独有,完全可以在我们的网页中实现。并且随着时间的推移,现在Web应用越来纷繁复杂,加载也是很费时的,一个Splash Screen就显得很有必要了不是么。比如谷哥的Gmail,要是全屏运行,就一个原生App的感觉。

下面我们就来为我们的Web应用加上Gmail一样的Splash Screen。程序可以很渣,若表面功夫到位了同样可以显得高端大气上档次。效果预览请点我 && 浏览代码请点我

进度的获取

展示静态图片还好,如果你的启动界面要显示程序进行的进度的话,一个很棘手的问题来了,如何获取进度。经过大量的调研(写过论文的同学都知道,类似'经过大量实验表明…'的表述其实很有可能是只做了一次实验就开始写结论了)我发现,没有办法获取一个页面的实际下载进度!当然,不排除我孤陋寡闻,如果你知道这样的方法请告诉我。

对于页面中的异步操作,倒是可以监听到进度的。但也得分情况。HTML5规范中,Ajax多了个progress事件,通过它可以获取异步操作的完成情况,但前提是event.lengthComputable属性为真是才管用。也就是说有些请求的结果我们是可以知道大小的,但更多时候服务器返回的内容的大小是不确定的,这种情况下即使你监听了progress事件也无法获取真实的操作进度。

既然如此,那我们就不要那么死磕,具体进行到百分之几意义不大,我们的目的是提高用户体验,在用户等待的这个过程中有东西可看,或者有一个活着的会动的东西表明程序还在跑而不是出错了卡死了。所以给用户展示一个会动的进度条即可(我相信大多数带进度条的程序也是这么干的),直到页面全部加载完成时把进度条托到100%。

插曲:在我探索如何获取页面真实下载进度的过程中,研究了pace.js的代码,一个做得非常棒的页面加载进度插件,发现他内部也是这么干的,页面上显示的进度并不真实返回页面加载的实现进度,只是不断的增加而以,等页面加载完了再拖到100%。当然该库写得比较完善,处理了各种情况比如ajax,web socket等。另外就是Gmail,经过大量(也有可能只有两三次,请不必太认真)的刷新页面尝试之后,我发现个规律,它的进度条会一路跑到一个点然后停下来,然后再一路跑到终点!之前的结论。(不过谷歌拥有牛逼烘烘的工程师,不排除他用了啥高科技算法在里面能够精确地返回页面加载的进度。Anyway, 如果我这里的结论错,请别太认真找我麻烦)

Nprogress

方便起见,这里使用nprogress这个JS库来显示动画。它提供了很方便的几个API可供我们使用。

  • NProgress.start() — 启动进度条
  • NProgress.set(0.4) — 将进度设置到具体的百分比位置
  • NProgress.inc() — 少量增加进度
  • NProgress.done() — 将进度条标为完成状态

定义我们的Splash Screen

好的,思路出来了下面我们就开始毫无技术含量的施工。具体来说,首先页面只显示我们预先定义好的Splash Screen,它要占满整个屏幕且z-index设为页面中最高。这里直接借用Juri 发表在他博客中的代码,不过我们使用我《前端冷知识集锦》可提到的技巧,将HTML代码存放在一个script标签中。