为了解决报表加载慢的问题，本文介绍了如何利用pace.js创建一个加载进度页面，提高用户体验。通过简单调用pace.js的API，可以方便地显示页面加载状态，提供多种CSS效果选择，并分享了pace自带示例中的简洁调用方式。
最近在做报表开发的时候，由于有一个报表是查的交易流水表，所以导致页面出来的有点慢，于是就想着在页面显示之前，加一个页面，告诉用户页面正在加载，提高友好性。
在网上搜了很多资料之后，决定使用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>
最低0.47元/天 解锁文章
477
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
