最近在做报表开发的时候，由于有一个报表是查的交易流水表，所以导致页面出来的有点慢，于是就想着在页面显示之前，加一个页面，告诉用户页面正在加载，提高友好性。
在网上搜了很多资料之后，决定使用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页面。这个方法虽不能精确的显示页面加载进度，但是使用方便，且适配性强，不用考虑框架和浏览器的兼容性。
时间： 2024-07-29 18:01:39