javascript - 如何使用 Pace.JS 在加载期间显示 Div

Question

每当我对 REST 服务进行 AJAX 调用时，我都会使用 Pace.JS 来显示加载器。 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();
});

希望现在还不算太晚!