网页加载进度页面_html/css_WEB-ITnose-html教程-PHP中文网

网页加载进度页面_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:45:23

原创

958人浏览过

最近在做报表开发的时候，由于有一个报表是查的交易流水表，所以导致页面出来的有点慢，于是就想着在页面显示之前，加一个页面，告诉用户页面正在加载，提高友好性。

在网上搜了很多资料之后，决定使用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，代码如下：