網頁也可以像原生應用那樣加入進度條或者其他的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(); 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體驗優化