我有一个相对复杂的 flexdashboard
,需要一些时间才能加载。
有人有向 flex_dashboard
输出添加预加载器的经验吗?
例如,添加 these 中的任何一个对我来说很棒。虽然我知道如何添加 gif
,但我想知道如何在网站加载时停止显示它。
在 rmarkdown
和 flex_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/