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

标签 html css r r-markdown preloader

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

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

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

rmarkdownflex_dashboard 中是否可以实现类似的功能?

最佳答案

您可以使用this codepen在 RMarkdown 中。

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

关于html - 将预加载器添加到 rmarkdown HTML 输出 [flexdashboard],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53189245/

相关文章:

r - 如何从三个不同的数据框中获取每个单元格的平均值?

jquery - 在 jQuery 中检查单选按钮

html - 摆脱 html 视频标签的水平溢出

html - 表单提交时偶尔会生成 404 页面

css - 将相同的选择器连接成一个

r - 编写一个程序,从以 10 为底的数字 x 到 R 中以 16 为底的数字的向量

html - 在非节点环境中托管mocha js

javascript - 鼠标移动不会触发悬停

html - 如何将两个元素对齐在同一行上?

r - 来自向量列表的数据框