Question

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

有人有向flex_dashboard输出添加预加载器的经验吗？

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

在rmarkdown和flex_dashboard中是否有可能？

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

此解决方案需要Pandoc2。对于Pandoc <2，请替换

::: {#preloader}
:::

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

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

1 个答案: