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

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

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

这就是宇宙***IDE Visual Studio的启动画面,学名叫Splash Screen(或者Splash Window)。同样,Javar们一定对Eclipse的启动画面不会陌生。不只是IDE,很多桌面程序都会有这个Splash 窗口,在程序进行初始化时显示。

这方面做得最赞的非Adobe旗下的设计类软件莫数了,毕竟是搞艺术出身的啊。博主从PS 8.0用起,每次升级新版本激动的不是新功能,首先是激动新的启动画面。下图是***CC版PS的Splash Screen。视觉效果震撼的一逼。。张牙舞爪的,无出其右。

[[111905]]

 

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

比如谷哥的Gmail,要是全屏运行,就一个原生App的感觉。

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

下面我们就来为我们的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标签中。

 
 
  1. <script type="text" id="splash-template"
  2.     <div class="splash card"
  3.         <div role="spinner"
  4.             <div class="spinner-icon"></div> 
  5.         </div> 
  6.         <p class="lead" style="text-align:center">不要回来,马上走开...</p> 
  7.         <div class="progress"
  8.             <div class="mybar" role="bar"
  9.             </div> 
  10.         </div> 
  11.     </div> 
  12. </script> 

这个splash screen会在HTML加载好之后***时间显示。接下来就可以这样做了,在页面最开始调用 Nprogress.start()启动进度条,而在这个splash screen下方遮住的页面中,继续我们程序的初始化,做其他一些非常耗时的操作等。比如你想象一下Gmail,最开始可能页面只有显示进度条那些基本的HTML和JS代码,然后需要向服务器请求大量的邮件信息,数据接收完后,再组织成HTML生成邮件列表append到页面,但这个过程因为被进度条挡住了,所以我们看不见。等一切就绪,再调用Nprogress.done()将进度条隐藏。这时你看到的就是一个完整的页面了。

事件的顺序

window.onload事件是在整个页面加载完成,包括其中所有图片,iframe等。所以,可以确定在这个事件里面把进度搞到100%是没有问题且逻辑正确的。

确定了何时结束再来看何时开始。既然我们一开始就要显示Splash Window且操作之前定义好的splash screen模板,意思就是说再怎么早开始也得等我们splash screen部分的HTML加载完成之后再进行吧。所以,得到的结论就是把进度条开始的代码放在这部分HTML代码之后,但这种HTML中插JS的做法很不好,所以***决定还是放在$(document).ready()里面,因为这个事件是在页面HTML加载完后触发的,但只是DOM,不包括其他比如上面提到的图片,iframe等,所以它是比window.onload先触发的。

所以在页面的head标签里面加入以下代码:

 
 
  1. $(function() { 
  2.     NProgress.configure({ 
  3.         template: $('#splash-template').html() 
  4.     }); 
  5.     NProgress.start(); 
  6. }); 
  7. $(window).load(function() { 
  8.     NProgress.done(); 
  9. }) 

 实际应用中更科学的做法其实应该是这样的,页面只有关于进度条的代码,程序的内容全部通过Ajax填充到页面,然后在页面中监视所有Ajax的返回情况。

模拟耗时的操作

一切就绪了,但需要解决一个事情就是如何模拟耗时的操作。我们现在弄的这个例子它不费时,无法看到缓慢的加载效果,并且本地测试,放上几十张图片都会很快就完事。

当然可以用setTimeout来达到目的,但不太科学吧,还是要弄得真实点。于是我们在页面放一个iframe,从其他网站引用页面,这样多少会有些加载的时间。

所以这个例子***的代码差不多是这样的了:

HTML:

 
 
  1. <!doctype html> 
  2. <html> 
  3.     <head> 
  4.         <meta charset="utf-8"> 
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  6.         <meta name="description" content=""> 
  7.         <meta name="viewport" content="width=device-width, initial-scale=1"> 
  8.         <title>splash screen example</title> 
  9.         <link rel="stylesheet" href="nprogress.css"> 
  10.         <link rel="stylesheet" href="main.css"> 
  11.         <script src="jquery.min.js"></script> 
  12.         <script src="nprogress.js"></script> 
  13.         <script type="text/javascript"> 
  14.             $(function(){ 
  15.                 NProgress.configure({ 
  16.                     template: $('#splash-template').html() 
  17.                 }); 
  18.                 NProgress.start(); 
  19.             }); 
  20.             $(window).load(function(){ 
  21.                 NProgress.done(); 
  22.             }) 
  23.         </script> 
  24.     </head> 
  25.     <body> 
  26.         <script type="text" id="splash-template"> 
  27.             <div class="splash card"> 
  28.                 <div role="spinner"> 
  29.                     <div class="spinner-icon"></div> 
  30.                 </div> 
  31.                 <p class="lead" style="text-align:center">不要回来,马上走开...</p> 
  32.                 <div class="progress"> 
  33.                     <div class="mybar" role="bar"> 
  34.                     </div> 
  35.                 </div> 
  36.             </div> 
  37.         </script> 
  38.         <iframe id="iframe" style="width: 100%; height: 660px;" src="http://wayou.github.io/SlipHover/" frameborder="0"></iframe> 
  39.     </body> 
  40. </html> 

加入些美化的样式:

CSS:

 
 
  1. html,body,iframe{ 
  2.     margin0
  3.     padding0
  4.  
  5. #nprogress{ 
  6.     positionfixed
  7.     top: 0
  8.     right: 0
  9.     bottom: 0
  10.     left: 0
  11.     background-color#f7f7f7
  12.     z-index999
  13. .spinner-icon
  14.     displaynone!important
  15.  
  16. .splash { 
  17.     position:absolute
  18.     top:40%
  19.     left:0
  20.     right:0
  21.     marginauto
  22.   } 
  23.  
  24.   .splash img { 
  25.     displayblock
  26.     margin-leftauto
  27.     margin-rightauto
  28.     height100px
  29.     width100px
  30.   } 
  31.  
  32.   .card { 
  33.     background-color#f7f7f7
  34.     padding20px 25px 15px
  35.     margin0 auto 25px
  36.     width380px
  37.   } 
  38.  
  39.   .mybar { 
  40.     background#29d
  41.     height:10px
  42.   } 
  43.  
  44.   .progress { 
  45.     height10px
  46.     overflowhidden
  47.   } 

 现在可以运行页面查看效果了。好了,就这么多。效果预览请点我

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

 Reference

原文链接:http://www.cnblogs.com/Wayou/p/gmail_like_page_loading_progress_bar.html

THE END