为你的Web程序加个启动
为你的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标签中。
<script type="text" id="splash-template"> <div class="splash card"> <div role="spinner"> <div class="spinner-icon"></div> </div> <p class="lead" style="text-align:center">不要回来，马上走开...</p> <div class="progress"> <div class="mybar" role="bar"> </div> </div> </div> </script>
这个splash screen会在HTML加载好之后第一时间显示。接下来就可以这样做了，在页面最开始调用 Nprogress.start()启动进度条，而在这个splash screen下方遮住的页面中，继续我们程序的初始化，做其他一些非常耗时的操作等。比如你想象一下Gmail，最开始可能页面只有显示进度条那些基本的HTML和JS代码，然后需要向服务器请求大量的邮件信息，数据接收完后，再组织成HTML生成邮件列表append到页面，但这个过程因为被进度条挡住了，所以我们看不见。等一切就绪，再调用Nprogress.done()将进度条隐藏。这时你看到的就是一个完整的页面了。
事件的顺序
wndow.onload事件是在整个页面加载完成，包括其中所有图片，iframe等。所以，可以确定在这个事件里面把进度搞到100%是没有问题且逻辑正确的。
确定了何时结束再来看何时开始。既然我们一开始就要显示Splash Window且操作之前定义好的splash screen模板，意思就是说再怎么早开始也得等我们splash screen部分的HTML加载完成之后再进行吧。所以，得到的结论就是把进度条开始的代码放在这部分HTML代码之后，但这种HTML中插JS的做法很不好，所以最后决定还是放在$(document).ready()里面，因为这个事件是在页面HTML加载完后触发的，但只是DOM，不包括其他比如上面提到的图片，iframe等，所以它是比window.onload先触发的。
所以在页面的head标签里面加入以下代码：
$(function() { NProgress.configure({ template: $('#splash-template').html() }); NProgress.start(); }); $(window).load(function() { NProgress.done(); })
实际应用中更科学的做法其实应该是这样的，页面只有关于进度条的代码，程序的内容全部通过Ajax填充到页面，然后在页面中监视所有Ajax的返回情况。
模拟耗时的操作
一切就绪了，但需要解决一个事情就是如何模拟耗时的操作。我们现在弄的这个例子它不费时，无法看到缓慢的加载效果，并且本地测试，放上几十张图片都会很快就完事。
当然可以用setTimeout来达到目的，但不太科学吧，还是要弄得真实点。于是我们在页面放一个iframe，从其他网站引用页面，这样多少会有些加载的时间。
所以这个例子最后的代码差不多是这样的了：
HTML：
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>splash screen example</title> <link rel="stylesheet" href="nprogress.css"> <link rel="stylesheet" href="main.css"> <script src="jquery.min.js"></script> <script src="nprogress.js"></script> <script type="text/javascript"> $(function(){ NProgress.configure({ template: $('#splash-template').html() }); NProgress.start(); }); $(window).load(function(){ NProgress.done(); }) </script> </head> <body> <script type="text" id="splash-template"> <div class="splash card"> <div role="spinner"> <div class="spinner-icon"></div> </div> <p class="lead" style="text-align:center">不要回来，马上走开...</p> <div class="progress"> <div class="mybar" role="bar"> </div> </div> </div> </script> <iframe id="iframe" style=" 100%; height: 660px;" src="http://wayou.github.io/SlipHover/" frameborder="0"></iframe> </body> </html>
加入些美化的样式：
CSS：
html,body,iframe{ margin: 0; padding: 0; } #nprogress{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: #f7f7f7; z-index: 999; } .spinner-icon{ display: none!important; } .splash { position:absolute; top:40%; left:0; right:0; margin: auto; } .splash img { display: block; margin-left: auto; margin-right: auto; height: 100px; 100px; } .card { background-color: #f7f7f7; padding: 20px 25px 15px; margin: 0 auto 25px; 380px; } .mybar { background: #29d; height:10px; } .progress { height: 10px; overflow: hidden; }
现在可以运行页面查看效果了。好了，就这么多。效果预览请点我
Reference
Intercept Page Load: https://developer.mozilla.org/en-US/Add-ons/Overlay_Extensions/XUL_School/Intercepting_Page_LoadsGmail-style progress bar when page is loading http://stackoverflow.com/questions/8020929/gmail-style-progress-bar-when-page-is-loadinghttp://www.gayadesign.com/scripts/queryLoader/https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progresshttp://api.jquery.com/jQuery.ajax/http://stackoverflow.com/questions/15328275/show-progressbar-while-loading-pages-using-jquery-ajax-in-single-page-websitehttp://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/http://github.hubspot.com/pace/http://onextrapixel.com/examples/youtube-like-ajax-loading-bar/
Feel free to repost but keep the link to this page please!
本文链接：http://www.cnblogs.com/Wayou/p/gmail_like_page_loading_progress_bar.html
分类: CSS, jQuery标签: Gmail, YouTube, 进度度, 启动界面, splash-screen, splash-window