實現加載頁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="http://i3.tietuku.com/8f4305f8f9538037.jpg" alt="maker">
   
  
</div>

JS：

var num = 0;
    var loader =   document.getElementById("loader")
    var content =document.getElementById("imgs");
    var loader_num= document.getElementById("loader_num");

function imgLoad(img) {
    var img_length = document.images.length ;
//「data-自定義屬性」符合HTML5標準， 自帶的dataset屬性雖然與getAttribute性能沒什麼大區別，但方便簡潔，可讀性高，不過目前兼容性通常。
    img.src =  img.dataset.loadsrc ||img.getAttribute("data-load-src");
    
    
//將百分比數字放在setTimeout()中實時變換數字    
         
   setTimeout (function(){ 
     loader_num.textContent=  Math.ceil((num)/(img_length)*100)+"%";
      num ++;
      if(num < img_length){
          imgLoad(document.images[num]);    }
      else{
      loader.style.display = "none";
      content.style.display="block";            }    
      },100) //設置百分比數字變換間隔
            

    }
imgLoad(document.images[num]);

2.使用window.onload事件

這種方法適合於絕大多數應用， 實現比較簡單，當從新刷新頁面時因爲已經被緩存過， loading page的時間會相應地縮短。頁面中的動畫能夠用gif圖，或如今流行的CSS3，SVG動畫。
實現邏輯是將loading page寫在一個div塊中， 並放在body內容的最前面，這樣loading page將最早被解析，而後使用window.onload事件隱藏該loading page，實現加載效果 ，DEMO效果展現使用window.onload的Loading Page

代碼：
HTML：

<!--loading page-->
<div class="loader">
<div class="loader-content">
    <img src="http://i3.tietuku.com/997c27fdf4ce259b.gif" alt="Loader" class="loader-loader" />
</div>
</div>
<!--content page-->
<div class="content">
  content
</div>

CSS：

@charset "UTF-8";

.loader {
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: #000;
    text-align: center;
/* loader頁面消失採用漸隱的方式*/
    -webkit-transition: opacity 1s ease;
    -moz-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    transition: opacity 1s ease;
}
/* 使用base64編碼嵌入加載的logo */
.loader-content {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPYAAABLCAMAAAB0mIpRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjQ3MEVEQkVGMzhGNDExRTU4OUQ2OTZGRTIxQ0U2OUI2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjQ3MEVEQkYwMzhGNDExRTU4OUQ2OTZGRTIxQ0U2OUI2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NDcwRURCRUQzOEY0MTFFNTg5RDY5NkZFMjFDRTY5QjYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NDcwRURCRUUzOEY0MTFFNTg5RDY5NkZFMjFDRTY5QjYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5KmW6xAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAO4SURBVHja7JvpcsMgDIRX7//Snc44Ext0rMThpg4/2jRxDB8IHYsLeWQDf+Vvexw2MJX75im8ERsfgI0F2FvBr53di42N1JfeHoX97m879nEP7OVue1uD7Vx33OQ27OPnEqsEy30H9e/vZdgB9x2LfXqxDhuW8ePdNjnvhrqOHQ3ZgLq6M2y1bJzmu7zawagNrL3uDE4bwEYNe58Tn4bNJpc2NraGrmFsmYy9N3ThYmfk3oaW1bqDD7F3QzdbFfQyT8DesNivWKF3Rwewk10MYhf3ViXlR4t9fHD6i94ZKjbYuI0R6pznvWIfa9/0DdYJtqE6hT3kTlMT1d0ZLbZTgakDPL2gjHxS9MxcqmGrmSGH3ZZOYb7Sxzq0+fgKbPTLoRe6YLyZ6ocDbN1Iy9Spa21sTmaAYawl9a5f7qXYOK99VV0Zzyt7K5fV2E1+llZOU7ZpXFFNi8tGrmalCezkWE2JoWYwBcu4qAtK+CKw80tkSgy1bXLlKKXgyGKj9xJV7uHVjr/YZpN2qgAeegwbVaXYcsY2tjRGnsKGWsCUdyPK5wK8mbywvezQxW6Nu4rdiW9VfYP6lpaW8tiwjDvj01pnMCjrsNRQhbs4OVXnpojt1yPT8yRja2myJQLBbQAbURm2gBrGbrOSU21Qbe1VwDYHwNwqOUtdAtp22iWn8Ars6ztKiRUXQlCxiQOGjG3oeo4h9jh99O+dt3seu3N3gTozUv20vgmKFmyYkxv4Mtj9GVRUYgxiI6BW9raqM9SwxcBmxbgqdjfruvJvTIohBoWJi47dvB/h1NU3pheQ+6OCrfjY/qRZkuC0+3er1m3Y1Tqs32Wc//e1GRjCq+YMef2w9xLV8lMdAp8vNEvnYmt2aEaypPxVgKawrek0tghCu1KroPj8qw+VoxK581Xn1ry6cok3WiQTMNjDR2AwkrtUbZrG7irWtyUMYudqEEaktz/WO0bStojBh9gF6rBfAjrw5AamkP40HEGY5dm9hHGTtgF/mr3COefR+rRl1llIRYKD12MQEQawiw94lYg5bHGWmlluinrlk7ZKrDUKz4xzLGOnnvCagm1XeuCmbAK2qvksxZY0treDuUiCyNGutnI9HLulCJcSpbB1FyHLuCWLHaUWVRuXXdRe8pU5HmBuRJnCDhOnloEpV1Zgb/hvR48FFbWylqzsbgx2SrX6DGyJs7SsVhdm5CJ/iltI7Lke5GZsRzmd9Nzzn8K2wyS29XQbuDwQ2xqlPLJ9sb/YX+wv9j9qPwIMAGQPOCcACnDkAAAAAElFTkSuQmCC") no-repeat 50% 0%;
    background-size: 123px 38px;
    display: block;
    position: relative;
    padding-top: 50px;
    top: 45%;
    
}
.fadeout {
    opacity: 0;
    filter: alpha(opacity=0);
}
/* logo出現動畫 */
@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);

JS:

window.onload = function(){
    setTimeout(function(){
    var loader = document.getElementsByClassName("loader")[0];
    loader.className="loader fadeout" ;//使用漸隱的方法淡出loading page
    setTimeout(function(){loader.style.display="none"},1000)
    },1000)//強制顯示loading page 1s
}

3.在<head>中直接粘貼JS代碼一次性實現

這種方法方便快捷， 一鍵搞定。
在這篇帖子中（JS實現頁面加載完畢以前loading提示效果）也提供了一個一次性解決的方案，它的原理是使用JS寫入一個loading的div，樣式等也都包含在內，這邊之因此要得到頁面寬度和高度，是由於要保持裏面loading框的寬高比。只須要直接將這段JS代碼放在<head>中就實現了頁面loading，至關方便，注意：記得替換loading.gif的效果圖。
DEMO效果（因爲內容較少，若是你的網速較快，loading會一閃而過）
在<head>中直接粘貼JS代碼一次性實現的Loading效果

轉帖：

//獲取瀏覽器頁面可見高度和寬度
var _PageHeight = document.documentElement.clientHeight,
    _PageWidth = document.documentElement.clientWidth;
//計算loading框距離頂部和左部的距離（loading框的寬度爲215px，高度爲61px）
var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0,
    _LoadingLeft = _PageWidth > 215 ? (_PageWidth - 215) / 2 : 0;
//在頁面未加載完畢以前顯示的loading Html自定義內容
var _LoadingHtml = '<div id="loadingDiv" style="position:absolute;left:0;width:100%;height:' + _PageHeight + 'px;top:0;background:#f3f8ff;opacity:1;filter:alpha(opacity=80);z-index:10000;"><div style="position: absolute; cursor1: wait; left: ' + _LoadingLeft + 'px; top:' + _LoadingTop + 'px; width: auto; height: 57px; line-height: 57px; padding-left: 50px; padding-right: 5px; background: #fff url(Image/loading.gif) no-repeat scroll 5px 10px; border: 2px solid #95B8E7; color: #696969; font-family:\'Microsoft YaHei\';">頁面加載中，請等待...</div></div>';
//呈現loading效果
document.write(_LoadingHtml);



//監聽加載狀態改變
document.onreadystatechange = completeLoading;

//加載狀態爲complete時移除loading效果
function completeLoading() {
    if (document.readyState == "complete") {
        var loadingMask = document.getElementById('loadingDiv');
        loadingMask.parentNode.removeChild(loadingMask);
    }
}

另外這裏在列出我收集的關於loading page一些博客：
給頁面加上Loading效果最簡單實用的辦法
張鑫旭大大的文章：
再說CSS3 animation實現點點點loading動畫
loading page後寬高體驗優化方法：
內容loading加載後高度變化CSS3 transition體驗優化