最近在做报表开发的时候,由于有一个报表是查的交易流水表,所以导致页面出来的有点慢,于是就想着在页面显示之前,加一个页面,告诉用户页面正在加载,提高友好性。
在网上搜了很多资料之后,决定使用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>