主页 / coding / 问题 / 77929343
Accepted
filups21
Asked: 2024-02-03 03:09:05 +0800 CST

在 R Shiny 中的 iframe 顶部显示加载动画一段设定的时间

  • 772

如何在 R Shiny 中的 iframe 顶部显示加载动画一段设定的时间？

我正在一个闪亮的应用程序的 iframe 中加载一个大的（~18 mb）html 文件。浏览器需要几秒钟才能完全加载 html 文件。我能找到的所有加载动画（例如，shinycssloaders、waiter、像这样的自定义加载动画）在 iframe 开始加载时停止显示动画，但由于我从文件加载，iframe 几乎立即开始加载，但它需要几秒钟才能完成加载。我想在 iframe 顶部显示一些内容几秒钟，以向用户表明 iframe（可能）尚未完成加载。

这是一个闪亮的应用程序，显示一个没有任何加载/等待动画的 iframe。

library(shiny)

ui <- fluidPage(
    shiny::fluidRow(
        shinycssloaders::withSpinner(
            shiny::uiOutput(outputId = "iframe"),
        )
    )
)

server <- function(input, output, session) {
    output$iframe <- shiny::renderUI({
        tags$iframe(src = "https://example.com/", style = 'width:90vw;height:90vh;')
    })
}

shinyApp(ui, server)

2 个回答

  1. Best Answer

    您可以使用CSS 动画。

    将以下 CSS 代码保存在位于应用程序www子文件夹中的文件myloader.css中。

    @font-face {
  font-family: Origin;
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/origin-extrabold-webfont.woff);
}

.myloader {
  align-items: center;
  background-color: #222;
  height: 150px;
}

.myloader > h1 {
  position: absolute;
  top: 10%;
  left: 30%;
  display: flex;
  justify-content: center;
  font-family: Origin, Helvetica Light, sans-serif;
  color: rgb(255, 242, 181);
  background-image: linear-gradient(
    rgb(255, 242, 181) 28%,
    rgb(77, 77, 77) 40%,
    rgb(255, 242, 181) 54%
  );
  -webkit-background-clip: text;
  letter-spacing: 0.5rem;
}

.myloader > h1 > span::before {
  content: "";
  animation-name: animate;
  animation-duration: 10s;
  animation-direction: normal;
  animation-fill-mode: none;
  padding-left: 10px;
}

@keyframes animate {
  0% {
    content: "Loading";
  }
  10% {
    content: "Loading.";
  }
  20% {
    content: "Loading..";
  }
  30% {
    content: "Loading...";
  }
  40% {
    content: "Loading....";
  }
  50% {
    content: "Loading.....";
  }
  60% {
    content: "Loading......";
  }
  70% {
    content: "Loading.......";
  }
  80% {
    content: "Loading........";
  }
  90% {
    content: "Loading.........";
  }
  100% {
    content: "Almost there!";
  }
}

    我们需要 JavaScript 在动画完成后删除它：

    js <- '
$(document).ready(function() {
  $(".myloader > h1 > span").on(
    "animationend",
    function() {
        $(".myloader").remove();
    }
  );
});
'

    这是闪亮的应用程序：

    library(shiny)

js <- '
$(document).ready(function() {
  $(".myloader > h1 > span").on(
    "animationend",
    function() {
        $(".myloader").remove();
    }
  );
});
'

ui <- fluidPage(
  tags$head(
    tags$script(HTML(js)),
    tags$link(rel = "stylesheet", href = "myloader.css")
  ),
  fluidRow(
    tags$div(
      class = "myloader",
      tags$h1(
        tags$span()
      )
    ),
    tags$iframe(src = "https://example.com/", style = 'width:90vw; height:90vh;')
  )
)

server <- function(input, output, session) {
}

shinyApp(ui, server)
    • 1

  2. 这是对Stephane Laurent 答案的一个糟糕的修改，允许在重新加载 iframe 时重新加载加载动画。

    CSS 代码保存在位于应用程序www子文件夹中的myloader.css文件中：

    .myloader {
  align-items: center;
  background-color: rgb(255,255,255); /* rgb(255,50,50);*/
  height: 60px;
}

.myloader > h1 {
  position: center;
  display: flex;
  justify-content: center;
  font-family: Origin, Helvetica Light, sans-serif;
  -webkit-background-clip: text;
  letter-spacing: 0.5rem;
}

.myloader > h1 > span::before {
  content: "";
  animation-name: animate;
  animation-duration: 4s;
  animation-direction: normal;
  animation-fill-mode: none;
  padding-left: 10px;
}

@keyframes animate {
  0% {
    content: url("1487.gif");
  }
}

    1487.gif从https://icons8.com/preloaders/下载并保存在www目录中。

    闪亮的应用程序：

    library(shiny)

js <- '
$(document).ready(function() {
  $(".myloader > h1 > span").on(
    "animationend",
    function() {
        $(".myloader").remove();
    }
  );
});
'

ui <- shiny::fluidPage(
    
    shiny::titlePanel(
        shiny::fluidRow(
            shiny::column(
                width = 12, 
                align="center",
                "My Title")
        )
    ),
    shiny::mainPanel( width = 12,
                      shiny::fluidRow(
                          shiny::column(
                              width = 12,
                              align = "center",
                              shiny::selectInput(
                                  inputId = 'website', 
                                  label = shiny::h5("Select page"), 
                                  choices = c('Example', 'Wikipedia'), 
                                  selected = 'Example', 
                                  multiple = F
                              )
                          )
                      ),
                      shiny::fluidRow(
                          shiny::htmlOutput("iframe")
                      )
    )
)

server <- function(input, output, session) {
    
    url_reactive <- shiny::reactive({
        switch(input$website,
               'Example' = "https://example.com/",
               'Wikipedia' = "https://www.wikipedia.org/",
               stop("input website invalid"))
        
    })
    
    output$iframe <- shiny::renderUI({
        list(
            tags$head(tags$script(HTML(js)), tags$link(rel = "stylesheet", href = "myloader.css")),
            tags$div(class = "myloader", tags$h1(tags$span())),
            tags$iframe(src = url_reactive(), style = 'width:96vw;height:100vh;')
        )
    })
}

shinyApp(ui = ui, server = server)

    最终结果：
    在此输入图像描述

    • 0

相关问题