向rmarkdown HTML输出[flexdashboard]添加预加载程序

我有一个相对复杂的

flexdashboard

，需要一些时间来加载

是否有人有在

flex\u仪表板

输出中添加预加载程序的经验

例如，添加任何一个对我来说都是很好的。虽然我知道如何添加

gif

，但我想知道如何在网站加载时停止显示它

您可以在rmarkdown中使用

rmarkdown

以及

flex\u仪表板

？

中执行类似操作

---
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>.

---

您是使用

将其编织成html文档还是使用

运行时：Shining

？@JohnCoene，编织成html。谢谢@romles！然而，我仍然无法在flexdashboard中运行它；它只是在页面加载时不显示，只在页面加载后显示。你知道为什么吗？这可能是与flexdashboard的源代码相勾结，我需要对包代码进行进一步的修补以使其正常工作。对不起，我不清楚您是否想要处理flexdashboard。这肯定是与flexdashboard源代码的冲突。我不太清楚。我来看看。是的，是我的错——我现在已经更正了帖子。如果你有什么好主意的话-我已经尝试过不同的方法（包括YAML中的external.css、.js、.html文件，插入到块中，等等），但是没有效果。我没有沉重的flexdashboard要测试。建议：将

div

与

before_body

参数一起包括在内。如果不清楚，我可以解释更多。非常感谢-但是，我尝试过，但没有成功。似乎仪表板源代码中的某些内容阻止在加载所有部件之前加载任何部件。我想我需要看看那里；如果你有什么建议，请告诉我。

::: {#preloader}
:::