时间戳

首页 > 解决方案 > 将预加载器添加到 rmarkdown HTML 输出 [flexdashboard]

html - 将预加载器添加到 rmarkdown HTML 输出 [flexdashboard]

问题描述

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

有没有人有在输出中添加预加载器的经验flex_dashboard？

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

rmarkdown在以及内是否有类似的可能flex_dashboard？

标签： htmlcssrr-markdownpreloader

解决方案

你可以在 RMarkdown 中使用这个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 < 2，替换

::: {#preloader}
:::

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

推荐阅读