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

Posted 2023-02-22

【中文标题】如何在使用 Pace.JS 加载期间显示 Div

【英文标题】：How to Show Div During Load with Pace.JS

【发布时间】：2014-06-22 08:51:00

【问题描述】：

每当我对 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/) 上看到了事件（开始、重新启动、隐藏），但没有实际使用它的示例，而且我尝试过的一切都没有奏效。

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

【参考方案1】：

这是一篇旧帖子，但我已经用 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;

【参考方案2】：

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

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

希望现在还为时不晚！

【讨论】：

对我来说就像一个魅力！太棒了！

也遇到了麻烦...我已经将上面的代码放在文档中，准备好就在速度 js 正下方...但它只会在完成速度时触发...我把它放进去吗找错地方了吗？