实现加载页Loading Page 的几种方法

网页也可以像原生应用那样加入进度条或者其他的loading效果带来更好的等待体验，这里归纳几种我收集的实现loading page的方法，这几种方法在交互上都有利有弊，适用于不同应用。（PS：以下方法在网速较快的情况下loading效果都会一闪而过）：

1.实现百分比效果的loading

这种方法最大程度地模拟了原生APP的加载过程，并可真实地反馈当前进度， 但目前每次刷新页面都会导致重新加载文件， 不利于刷新较多的应用。

实现百分比进度提示的关键在于首先获得DOM文件总大小，然后实时显示加载完毕的文件/DOM总大小，这样讲显得很抽象， 一般的网页DOM中字符串的数据量可以忽略，我们只需要计算图片的数据量当成总数据量就可以了，这里有个问题，如何得知每张图片加载成功呢？方法是在HTML中我们将<img>中图片url属性写成一个任意属性（比如这里可以用HTML5自定义属性“data-”)然后用JS将这个任意属性转换成标准src，这样做的逻辑是使得每个<img>中的src被正确设置后就可以得到一个当前进度。另外一个需要注意的地方是实时显示的百分比数字需要用到setTimeout这种阻断式的显示，而不能直接替换HTML内容，之前我就想当然地直接替换textContent或替换文本节点的方法来实时变换数字，在stack overflow上问了半天才知道方向错了（问题链接）导致百分比数字的变换无法渐进显示，而是直接输出为最后数字。DEMO在此百分比 Loading Page
HTML：

    <!--loader-->
<div class="loader" id="loader" >
    <div class="loader_box">
    <div id="loader_num" style="font-size:15em;">100%</div>
    </div>
    </div>
 
<!--content-->
<div id="imgs" style="display:none;">
  <img data-loadsrc="http://i3.tietuku.com/6c65325bbf87eb84.jpg" alt="whu">
    <img data-loadsrc="http://i3.tietuku.com/780c4c17e7bcc81d.jpg" alt="cherry">
    <img data-loadsrc="http://i3.tietuku.com/a72ff6249b76a87e.jpg" alt="eastLake">
    <img data-loadsrc="http://i11.tietuku.com/7b57a678c8999dba.jpg" alt="Chrysanthemum">
   <img data-loadsrc="http://i3.tietuku.com/eba2fb18598fa5ca.jpg" alt="window">
   <img data-loadsrc="ht