如何在使用Pace.JS加载时显示分区

Question

每当我对REST服务进行AJAX调用时，我都会使用Pace.JS显示一个加载器。Pace在这里工作得很好，除了页面在加载器旋转时仍然是交互式的。当我试图加载数据时，我真的不希望页面是交互式的。

为了解决这个问题，我想要在Pace.JS加载动画处于活动状态(Z索引为2000，因此它位于模式的顶部)时显示一个div (白色，具有高不透明度以模拟模式)，Z索引为1999，覆盖整个页面(宽度/高度= 100%)，并在Pace.JS加载动画完成时隐藏该div，以限制我加载数据时用户可以与之交互的内容。

我看过Pace.JS hubspot主页(http://github.hubspot.com/pace/)上的事件(启动、重启、隐藏)，但没有实际使用的例子，我尝试过的所有东西都不起作用。

有没有人可以贴出一个例子，告诉我如何做我正在寻找的事情？这对我真的真的很有帮助。谢谢!

Answer 1

您可以通过以下方式实现您的目标：

CSS：

div.paceDiv {
   position: absolute;
   width: 100%;
   height: 100%;
   ...
   display: none;
}

JS：

Pace.on("start", function(){
    $("div.paceDiv").show();
});

Pace.on("done", function(){
    $("div.paceDiv").hide();
});

希望现在还不算太晚！

Answer 2

这是一个旧的帖子，但我已经用css修复了这个问题

pace-running::after {
position: absolute;
background-color: #ffffff;
opacity: 0.1;
top:0;
left: 0;
right: 0;
width: 100%;
height: 100%;
content: ' ',
z-index: 9998;}