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

问题描述

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

I'm using Pace.JS to display a loader anytime I make AJAX calls to a REST service. Pace is working perfectly here except, the page is still interactive while the loader is spinning. I really don't want the page to be interactive while I'm trying to load data.

为了解决这个问题，我想要显示一个div（白色高模糊一个模态的不透明度，其中Z-Index为1999，覆盖整个页面（宽度/高度= 100％），而Pace.JS加载动画是活动的（在Z-Index 2000，因此它位于模态的顶部），当Pace.JS加载动画完成时，隐藏div，以限制用户在加载数据时可以与之交互的内容。

To fix this, I want to SHOW a div (white with a high opacity to simulate a modal) with a Z-Index of 1999 covering the entire page (width/height = 100%) while the Pace.JS loading animation is active (at Z-Index 2000 so it's sitting on top of the modal), and hide the div when the Pace.JS loading animation is complete to limit what a user can interact with while I'm loading data.

我看过事件（启动，重启，隐藏）在Pace.JS hubspot主页上（）但是没有实际使用它的例子，我尝试过的一切都没有用。

I've seen the events (start, restart, hide) on the Pace.JS hubspot homepage (http://github.hubspot.com/pace/) but there are no examples of actually using it and everything I've tried hasn't worked.

有人可以发一个如何做我正在寻找的例子？这真的，真的对我有帮助。谢谢！

Can someone post an example of how to do what I'm looking for? It would really, really help me. Thanks!

推荐答案

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

You can achieve your goal with the following:

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();
});

希望不会太晚！

这篇关于如何在Pace.JS加载期间显示Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！