将预加载器添加到 rmarkdown HTML 输出 [flexdashboard]答案

【问题标题】：Add a preloader to rmarkdown HTML output [flexdashboard]将预加载器添加到 rmarkdown HTML 输出 [flexdashboard]
【发布时间】：2018-11-07 12:12:32
【问题描述】：

我有一个相对复杂的flexdashboard 需要一些时间来加载。

有没有人有将预加载器添加到flex_dashboard 输出的经验？

例如，添加任何these 对我来说都很棒。虽然我知道如何添加 gif，但我想知道如何在网站加载时停止显示它。

在rmarkdown 和flex_dashboard 中是否有类似的可能？

【问题讨论】：

您是在将其编入 html 文档还是使用 runtime: shiny？
@JohnCoene，编织成 HTML。

标签： html css r r-markdown preloader

【解决方案1】：

您可以在 RMarkdown 中使用 this codepen。

---
output: html_document
---

```{css, echo=FALSE}
#preloader {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: rgba(255,255,255,0.5) url('https://cdn.dribbble.com/users/107759/screenshots/2436386/copper-loader.gif') no-repeat center 20%;
}
```

::: {#preloader}
:::

```{js, echo=FALSE}
$(function() {
  $(window).load(function() {
    $('#preloader').fadeOut('slow',function(){$(this).remove();});
  });
});
```

A solution inspired by codepen: <https://codepen.io/mimoYmima/pen/fisgL>.

此解决方案需要 Pandoc 2。对于 Pandoc

::: {#preloader}
:::

<div id="preloader"></div>

【讨论】：

谢谢@romles！但是，我仍然无法让它在 flexdashboard 中运行；它只是在页面加载时不会出现，它只会在页面加载后出现。任何想法为什么？可能这是与 flexdashboard 源代码的勾结，我需要进一步修改包代码才能使其工作。
抱歉，我不清楚您是否要处理 flexdashboard。这肯定是与 flexdashboard 源代码的冲突。我不太了解。我去看看。
是的，我的错 - 我现在已经更正了帖子。如果您有任何想法，那就太好了 - 我已经尝试过不同的方法（包括 YAML 中的外部 .css、.js、.html 文件，将它们插入块等），但无济于事。跨度>
我没有沉重的 flexdashboard 来测试。一个建议：将div 包含在before_body 参数中。如果不清楚，我可以解释更多。
非常感谢 - 但是，已经尝试过了，但没有成功。仪表板源代码中的某些内容似乎阻止在所有部分加载之前加载任何部分。我想我需要看看那里；如果您有任何建议，请告诉我。