如何在Pace.JS加载期间显示Div

Question

我正在使用Pace.JS在我向REST服务进行AJAX调用时显示加载器.Pace在这里工作得很好,除了在装载机旋转时页面仍然是交互式的.在我尝试加载数据时,我真的不希望页面是交互式的.

为了解决这个问题,我希望在Pace.JS加载动画处于活动状态时显示一个div(白色具有高不透明度以模拟模态),其Z-Index为1999覆盖整个页面(宽度/高度= 100%)在Z-Index 2000,所以它坐在模态的顶部),并在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();
});

希望不会太晚了!