我使用的是一个非常复杂的柔性面板结构，有10页和几个图形。加载时间约为30“，我想在每一页上显示文本”加载数据.“，直到图表是有效的。
为了达到这个目的，我在每一页中都插入了一个加载数据.我使用Javascript来检测页面何时加载，从而将可见性设置为隐藏的所有内容。
当图表被加载时，文本“加载数据.”不会藏起来。
下面是一个可重复的例子：
---
title: 'Reprex'
output:
flexdashboard::flex_dashboard:
orientation: column
vertical_layout: fill
runtime: shiny
---
```{r setup, include=FALSE}标签$head(标签$script(src= "script.js"))
Reprex{data-icon="fa-chart-bar"}
=====================================
<div id="loading">Loading data...</div>
```{r}renderPlot({
Sys.sleep(5) #它只是在模仿精化时间
阴谋(汽车)
})
以下是javascript文件的内容(位于RMD文件的同一个目录中)：
$(document).on('shiny:busy', function(event) {
var cont = document.getElementById("loading");
cont.style.visibility = "visible";
});
$(document).on('shiny:idle', function(event) {
var cont = document.getElementById("loading");
cont.style.visibility = "hidden";
});预先感谢您的支持。
回答 1
Stack Overflow用户
发布于 2022-08-04 13:52:19
这样做：
---
title: 'Reprex'
output:
flexdashboard::flex_dashboard:
orientation: column
vertical_layout: fill
runtime: shiny
---
```{js}Shiny.addCustomMessageHandler(“加载-完成”，函数(数据){
document.querySelector(`[data-loading="${data.loading_id}"]`).style.display = "none"})
Reprex{data-icon="fa-chart-bar"}
=====================================
<div data-loading="loading-1">Loading data...</div>
```{r}renderPlot({
Sys.sleep(5) #it's just to mimic the elaboration timeon.exit(session$sendCustomMessage("loading-done", list(loading_id = "loading-1")))plot(cars)})
- 将
id更改为自定义data-loading属性，因为flexdashboard在ID中添加了一些前缀。不要浪费时间预测页面上的pattern. - Make a
<div data-loading="loading-1"> ... </div>，只需记住更改加载ID。data-loading="loading-X"与服务器上的list(loading_id = "loading-x")成对。当情节结束时， - 向JS发送一个信号以隐藏消息。
交替
我建议您使用其他加载程序库，这样您就不需要编写自己的JS了。
---
title: 'Reprex'
output:
flexdashboard::flex_dashboard:
orientation: column
vertical_layout: fill
runtime: shiny
---
```{r include=FALSE}图书馆(SpsComps)
Reprex{data-icon="fa-chart-bar"}
=====================================
```{r}plotOutput("plot1")
```{r}loader1 <- addLoader$new(
target_selector = "plot1",footer = h4("Loading data..."))
输出$plot1 1 <- renderPlot({
loader1$show()Sys.sleep(5) #it's just to mimic the elaboration timeon.exit(loader1$hide())plot(cars)})
为此，每个页面都需要自己的加载程序。
如果您想要多个页面，我们可以使用full_screen加载器，这样所有页面都可以共享同一个加载程序。
---
title: 'Reprex'
output:
flexdashboard::flex_dashboard:
orientation: column
vertical_layout: fill
runtime: shiny
---
```{r include=FALSE}图书馆(SpsComps)
Reprex{data-icon="fa-chart-bar"}
=====================================
```{r}plotOutput("plot1")
```{r}loader1 <- addLoader$new(
target_selector = "body", isID = FALSE, method = "full_screen",footer = h4("Loading data..."), height = "300px")
输出$plot1 1 <- renderPlot({
loader1$show()Sys.sleep(2) #it's just to mimic the elaboration timeon.exit(loader1$hide())plot(cars)})
Reprex{data-icon="fa-home"}
=====================================
```{r}renderUI({
loader1$show()Sys.sleep(2)on.exit(loader1$hide())div("another page")})
https://stackoverflow.com/questions/73233341
复制
相似问题
如何在单击按钮时将纵向模式更改为横向模式？
单击按钮将垂直屏幕模式更改为水平屏幕模式
如何通过单击按钮将android更改为静默模式？
如何将jQuery模式更改为React模式？
将网格模式更改为列表模式
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
