ホームページ > 記事 > ウェブフロントエンド > Web ページの読み込みの進行状況 page_html/css_WEB-ITnose
Web ページの読み込みの進行状況 page_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:45:23845ブラウズ
最近在做报表开发的时候，由于有一个报表是查的交易流水表，所以导致页面出来的有点慢，于是就想着在页面显示之前，加一个页面，告诉用户页面正在加载，提高友好性。
在网上搜了很多资料之后，决定使用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页面。这个方法虽不能精确的显示页面加载进度，但是使用方便，且适配性强，不用考虑框架和浏览器的兼容性。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。