.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()将进度条隐藏。这时你看到的就是一个完整的页面了。

事件的顺序

window.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="width: 100%; height: 660px;" src="http://wayou.github.io/SlipHover/" frameborder="0"></iframe>

    </body>

</html>

加入些美化的样式：

CSS：

html,body,iframe{

	margin: ;

	padding: ;

}

#nprogress{

	position: fixed;

	top: ;

	right: ;

	bottom: ;

	left: ;

	background-color: #f7f7f7;

	z-index: ;

}

.spinner-icon{

	display: none!important;

}

.splash {

    position:absolute;

    top:%;

    left:;

    right:;

    margin: auto;

  }

  .splash img {

    display: block;

    margin-left: auto;

    margin-right: auto;

    height: 100px;

    width: 100px;

  }

  .card {

    background-color: #f7f7f7;

    padding: 20px 25px 15px;

    margin:  auto 25px;

    width: 380px;

  }

  .mybar {

    background: #29d;

    height:10px;

  }

  .progress {

    height: 10px;

    overflow: hidden;

  }

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

Reference

为你的Web程序加个启动画面的更多相关文章

ios 应用程序图标、启动画面、itune图标设置
http://blog.sina.com.cn/s/blog_4cd8dd1301014hfz.html 先说说应用程序图标,一般有下面几种: Icon.png(57x57) - Homescreen ...
XE7 - 程序图标及启动画面图片的注意事项
还是继续昨晚写的,年前已经解决了这个问题,现在补记下.启动画面失真是本篇笔记的重点.搜索了很多文章,基本上大同小异,几乎都没怎么提及启动画面失真的问题.不知道是不是我的操作不对头,. Project ...
通过uwsgi+nginx启动flask的python web程序
通过uwsgi+nginx启动flask的python web程序一般我们启动python web程序的时候都是通过python直接启动主文件,测试的时候是可以的,当访问量大的时候就会出问题pyth ...
QSplashScreen类实现Qt程序启动画面
QSplashScreen类实现Qt程序启动画面收藏人:zwsj 2013-09-13 | 阅:569 转:6 | 来源 | 分享程序启动 ...
我的Android最佳实践之—— Android启动画面的实现方法
本文实例讲述了Android启动画面的实现方法.分享给大家供大家参考.具体分析如下: 在应用程序中经常用到启动画面,会启动一个后台线程为主程序的运行准备资源.Android要实现启动画面可以这样做: ...
java web程序启动加载 ContextLoaderListener
浅析ContextLoaderListener 大家可能对下面这段代码再熟悉不过了 <context-param> <param-name>contextConfigLocat ...
使用spring等框架的web程序在Tomcat下的启动顺序及思路理清
大牛请绕过,此文仅针对自己小白水平,对web程序的启动流程做个清晰的回顾. 一.使用spring等框架的web程序在Tomcat下的启动流程 1)Tomcat是根据web.xml来启动的.首先到web ...
基于Spring MVC的web应用随应用启动而加载
写个类实现org.springframework.context.ApplicationContextAware接口即可. 但是如下的程序会在启动时加载两次: @Controller public c ...
用C#给程序加启动画面并只允许一个应用程序实例运行
. 启动画面类: public class SplashForm : System.Windows.Forms.Form { private System.Windows.Forms.PictureB ...

随机推荐

【原创分享·支付宝支付】HBuilder打包APP调用支付宝客户端支付
前言最近有点空余时间,所以,就研究了一下APP支付.前面很早就搞完APP的微信支付了,但是由于时间上和应用上的情况,支付宝一直没空去研究.然后等我空了的时候,发现支付宝居然升级了支付逻辑,虽然目前还 ...
1.初始Windows Server 2012 R2 Hyper-V + 系统安装详细
干啥的?现在企业服务器都是分开的,比如图片服务器,数据库服务器,redis服务器等等,或多或少一个网站都会用到多个服务器,而服务器的成本很高,要是动不动采购几十台,公司绝对吃不消的,于是虚拟化技术出来 ...
Python列表去重
标题有语病,其实是这样的: 假设有两个列表 : L1 = [1,2,3,4] ; L2 = [1,2,5,6] 然后去掉L1中包含的L2的元素直接这样当然是不行的: def removeExists ...
46张PPT讲述JVM体系结构、GC算法和调优
本PPT从JVM体系结构概述.GC算法.Hotspot内存管理.Hotspot垃圾回收器.调优和监控工具六大方面进行讲述.(内嵌iframe,建议使用电脑浏览) 好东西当然要分享,PPT已上传可供下载 ...
IIC驱动移植在linux3.14.78上的实现和在linux2.6.29上实现对比（deep dive)
首先说明下为什么写这篇文章,网上有许多博客也是介绍I2C驱动在linux上移植的实现,但是笔者认为他们相当一部分没有分清所写的驱动时的驱动模型,是基于device tree, 还是基于传统的Platf ...
C#中如何在Excel工作表创建混合型图表
在进行图表分析的时候,我们可能需要在一张图表呈现两个或多个样式的图表,以便更加清晰.直观地查看不同的数据大小和变化趋势.在这篇文章中,我将分享C#中如何在一张图表中创建不同的图表类型,其中包括如何在同 ...
【Machine Learning】机器学习及其基础概念简介
机器学习及其基础概念简介作者:白宁超 2016年12月23日21:24:51 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本系列文章是作者结 ...
angluarjs2项目生成内容合并到asp.net mvc4项目中一起发布
应用场景 angular2(下文中标注位NG2)项目和.net mvc项目分别开发,前期采用跨域访问进行并行开发,后期只需要将NG2项目的生产版本合并到.net项目. NG2项目概述 ng2项目采用的 ...
[转载]网站地址栏小图标favicon.ico的制作方法
有人也许会好奇,有的网址前面有个漂亮的小图标而且有的网站图标还会动,这是怎么做到的呢? 如下图所示: 那个小图标有个名字叫favicon.ico,网站图标虽小但可以起到很好的点缀作用,尤其是当浏览者将 ...
如何区别exists与not exists?
1.exists:sql返回结果集为真:not exists:sql不返回结果集为真.详解过程如图: exists not exists

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