在Shiny App中随机加载页面图像

问题描述

我有具有需要时间来负载，并已成功地修改我这个网站上找到的代码的几个反应性表一个闪亮应用程式（https://www.listendata.com/2019/07/add-loader-for-shiny-r.html），以当每个标签被选中作为输出具有加载GIF显示表生成（但条件面板生成时不生成）。

我想随机化图像。我怀疑可以使用ShinyJS包实现此目的，但是我对Java的了解很少，而且似乎完全没有意义。

    library(shiny)
    library(shinydashboard)

# User Interface
ui <-
  dashboardPage(skin = "black",dashboardHeader(title = "Loading Screen"),dashboardSidebar(),dashboardBody(
                  
                  # Javasript Code
                  singleton(tags$head(HTML("
<script type='text/javascript'>

/* When recalculating starts,show loading screen */
$(document).on('shiny:recalculating',function(event) {
if(event.target.id === 'plot'){
$('div#divLoading').addClass('show');
}
});

/* When new value or error comes in,hide loading screen */
$(document).on('shiny:value shiny:error',function(event) {
$('div#divLoading').removeClass('show');
});

</script>"))),# CSS Code
                  singleton(tags$head(HTML(paste0("
<style type='text/css'>
#divLoading
{
  display : none;
  }
  #divLoading.show
  {
  display : block;
  position : fixed;
  z-index: 100;
  background-image : url('http://northerntechmap.com/assets/img/loading-dog.gif');
  background-size: auto 40%;
  background-repeat : no-repeat;
  background-position : center;
  left : 0;
  bottom : 0;
  right : 0;
  top : 0;
  }
  #loadinggif.show
  {
  left : 50%;
  top : 50%;
  position : absolute;
  z-index : 101;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
  margin-left : -16px;
  margin-top : -16px;
  }
  div.content {
  width : 1000px;
  height : 1000px;
  }
  
</style>")))),# HTML Code   
                  
                  Box(tags$body(HTML("<div id='divLoading'> </div>")),plotOutput('plot',width = "800px",height = "450px"),actionButton('goPlot','Generate Plot',icon("paper-plane"),style="color: #fff; background-color: #337ab7; border-color: #2e6da4"),width = 12,height = 500)
                  
                ))

server <- function(input,output) {
  output$plot <- renderPlot({
    input$goPlot
    Sys.sleep(3)
    plot(iris$Sepal.Length,iris$Petal.Length)
  })
}

shinyApp(ui,server)

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

shinydashboard shinyjs