網頁載入進度頁面，載入進度頁面

網頁載入進度頁面，載入進度頁面

       最近在做報表開發的時候，由於有一個報表是查的交易流水表，所以導致頁面出來的有點慢，於是就想著在頁面顯示之前，加一個頁面，告訴使用者頁面正在載入，提高友好性。

       在網上搜了很多資料之後，決定使用pace.js這個控制項來實現，pace.js的使用非常簡便，只需調用幾個API即可，裡面也提供了很多css效果供選擇，自己在本地測試專案中測試了一下，確實可用。網上的教程大多推薦使用pace.start和pace.done來完成調用，但我發現pace內建的樣本裡面，有更簡單的調用方法，代碼如下：

<head>  <link rel="stylesheet" href="../themes/pace-theme-barber-shop.css" />  <script>    paceOptions = {      elements: true    };  </script>  <script src="../pace.js"></script>  <script>    Pace.on('hide', function(){      console.log('done');    });  </script></head><body></body>

         使用pace.start和pace.done方法，需要在document.ready中調用pace.start，在window.onload中調用pace.done，由於我對jQuery不是很熟，於是又在網上找了一段可以通過js實現document.ready的代碼，如下：

(function () {  var ie = !!(window.attachEvent && !window.opera);  var wk = /webkit\/(\d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);  var fn = [];  var run = function () { for (var i = 0; i < fn.length; i++) fn[i](); };  var d = document;  d.ready = function (f) {    if (!ie && !wk && d.addEventListener)      return d.addEventListener('DOMContentLoaded', f, false);    if (fn.push(f) > 1) return;    if (ie)      (function () {        try { d.documentElement.doScroll('left'); run(); }        catch (err) { setTimeout(arguments.callee, 0); }      })();    else if (wk)      var t = setInterval(function () {        if (/^(loaded|complete)$/.test(d.readyState))          clearInterval(t), run();      }, 0);  };})();

不過令人心塞的是，這麼好的方法，在遷移到具體的報表環境裡去之後，卻一直報錯，提示pace.js裡面的一個方法不能使用，由於對所使用的報表系統的架構和pace的實質都不是很清楚，也沒有那麼多精力去鑽研這個，不得已只有放棄。但這個放棄，其實反而是件好事，因為經過仔細思考之後，我發現我的需求僅僅只是告訴客戶我的頁面正在載入，不需要非常詳細的進度顯示，那其實就可以首先將報表頁面指向一個load頁面，這個頁面什麼都不做，只顯示一個load的gif圖片，然後在body裡面配置一下onload，代碼如下：

<body onLoad="location.href='url'">

這樣，選擇這張報表之後，就會先顯示load頁面，當真正的報表頁面載入完成之後，就會自動覆蓋掉load頁面。這個方法雖不能精確的顯示頁面載入進度，但是使用方便，且適配性強，不用考慮架構和瀏覽器的相容性。