网页加载进度页面_html/css_WEB-ITnose-HTML-Tutorial-php.cn

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

WBOY

Freigeben： 2016-06-24 11:45:23

Original

860 Leute haben es durchsucht

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

在网上搜了很多资料之后，决定使用pace.js这个控件来实现，pace.js的使用非常简便，只需调用几个API即可，里面也提供了很多css效果供选择，自己在本地测试项目中测试了一下，确实可用。网上的教程大多推荐使用pace.start和pace.done来完成调用，但我发现pace自带的示例里面，有更简单的调用方法，代码如下：

  <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>

Nach dem Login kopieren

使用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  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);  };})();

Nach dem Login kopieren

不过令人心塞的是，这么好的方法，在迁移到具体的报表环境里去之后，却一直报错，提示pace.js里面的一个方法不能使用，由于对所使用的报表系统的框架和pace的实质都不是很清楚，也没有那么多精力去钻研这个，不得已只有放弃。

但这个放弃，其实反而是件好事，因为经过仔细思考之后，我发现我的需求仅仅只是告诉客户我的页面正在加载，不需要非常详细的进度显示，那其实就可以首先将报表页面指向一个load页面，这个页面什么都不做，只显示一个load的gif图片，然后在body里面配置一下onload，代码如下：

Nach dem Login kopieren

这样，选择这张报表之后，就会先显示load页面，当真正的报表页面加载完成之后，就会自动覆盖掉load页面。这个方法虽不能精确的显示页面加载进度，但是使用方便，且适配性强，不用考虑框架和浏览器的兼容性。