Home > Article > Web Front-end > Web page loading progress page_html/css_WEB-ITnose
Web page loading progress page_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:45:23831browse
最近在做报表开发的时候，由于有一个报表是查的交易流水表，所以导致页面出来的有点慢，于是就想着在页面显示之前，加一个页面，告诉用户页面正在加载，提高友好性。
在网上搜了很多资料之后，决定使用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页面。这个方法虽不能精确的显示页面加载进度，但是使用方便，且适配性强，不用考虑框架和浏览器的兼容性。
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：css3 cube rotation_html/css_WEB-ITnoseNext article：css3 cube rotation_html/css_WEB-ITnose