在Chrome中重新加载动画GIF时出现问题

Question

我有一个应用程序，重新加载动画GIF。它一直在Safari中工作，间歇性地在Chrome中工作。我认为问题类似于提到的here。

我对Javascript的了解可以忽略不计。但是，阅读this，我想出了这个例子，但仍然无效。使用Chrome，如果再次单击足够多次，您将看到有时图像重新加载失败。

library(shiny)
library(shinyjs)

jsCode <- '
shinyjs.reset_anim = function() {
  var div_elem = document.getElementById("anim_plot");
  var img_elem = div_elem.getElementsByTagName("img")[0];
  var src_value = img_elem.getAttribute("src");
  img_elem.setAttribute("src", "");
  img_elem.setAttribute("src", src_value);
}
'


# Define UI ----
ui <- fluidPage(useShinyjs(),
                extendShinyjs(text = jsCode),

                plotOutput("anim_plot",
                           width = "900px",
                           height = "200px"),

                fluidRow(
                  column(3,  
                    actionButton("do_again", "Again")
                  )
                )
)

# Define server logic ----
server <- function(input, output) {
  observeEvent(input$do_again, {
    js$reset_anim()
    output$anim_plot <- renderImage({
      list(src = "www/tmp/ani.gif",
           contentType = 'image/gif',
           width = 900,
           alt = "Text"
      )
    }, deleteFile = FALSE)
  })
}

shinyApp(ui = ui, server = server)  

你可以找到一个动画gif here。

Answer 1

我避免使用renderImage来做这类事情。在过去，我一直在努力使用这个功能一段时间（这对情节很有用，但不是真正的png，jpeg，gif等）所以这里是一个使用html img（）标签作为renderUI输出对象的工作替代方案。似乎你的JavaScript工作正常。此外，您可以使用在线图像，我发现它比本地存储图像更好

library(shiny)
library(shinyjs)

jsCode <- '
shinyjs.reset_anim = function() {
  var div_elem = document.getElementById("anim_plot");
  var img_elem = div_elem.getElementsByTagName("img")[0];
  var src_value = img_elem.getAttribute("src");
  img_elem.setAttribute("src", "");
  img_elem.setAttribute("src", src_value);
}
'


# Define UI ----
ui <- fluidPage(useShinyjs(),
                extendShinyjs(text = jsCode),
                uiOutput('anim_plot'),
                fluidRow(
                  column(3,  
                         actionButton("do_again", "Again")
                  )
                )
)

# Define server logic ----
server <- function(input, output) {
  output$anim_plot <- renderUI({
    img(src='https://uc290691998b0891615b1f3e9397.previews.dropboxusercontent.com/p/orig/AAae6QYO7VLEEUVYdUuL985gwFGGVQ_RJ0mjLtfJt0bk3UO1ThezW4YO7R5LUzN9_m6moBjubhfX2AAnYmEkwDEjnwIw1gLOWUrOw4q_pKYYtXW-JCgghu4NuCgPKCm3RXxt3rNULvlUg-cP_Oj2vnItglJchP6a6a_lyApxTdZHwPk4Yv6jWxiYANVdFAVKxiTeHWVC5J3PYDeW8yOnaj4VGDj92eJCIXYtjpmznffo0tPUdUovNJMMW5nzsgT0L38w_5h39bcBxIwoCBmZ95iC8SRd9BGHxJMGCM4HUVh_Ly0VW3lwBxUx3O__VD5Ind-lahJwVkZjmet-HzP6XnUB/p.gif?size_mode=5', align = "right")
  })

  observeEvent(input$do_again, {
    js$reset_anim()

  })
}

shinyApp(ui = ui, server = server)  

更新： 应用服务器文件，ui文件和www文件夹中的5个gif：我刚刚从giphy下载了5个随机GIF，并使其中一个不与ezgif.com循环，将它们存储为gif1.gif，gif2.gif等。

@OP：请记住，您的javascript定位于1个特定的gif对象。如果你想重新加载另一个gif，你必须重写你的javascript来获取一个输入参数，这个你想要重启的anim_plot n的名字我想。我不是javascript专家，所以我不打算在这里添加，但如果你这样做，请随意将其添加到这里的信息

附： 1：不要在你的src参数中加上'www /'。闪亮自动查看www文件夹内。 。

ps 2：请记住，某些内容在RStudio的内部界面中不起作用，并通过单击“运行应用程序”右侧的小箭头菜单下的“运行外部”将其设置为外部运行闪亮的应用程序播放按钮。

# File of the server.
server <- function(input, output) {

  lapply(1:5, function(image_id) { 
  output[[paste('anim_plot', image_id, sep = '')]] <- renderUI({
    img(src=paste('gif', image_id, '.gif', sep = ''), align = "right")

    })
  })

  observeEvent(input$do_again, {
    js$reset_anim()

  })
}


# File of UI ----
library(shiny)
library(shinyjs)

jsCode <- '
shinyjs.reset_anim = function(anim_plot2) {
  var div_elem = document.getElementById("anim_plot2");
  var img_elem = div_elem.getElementsByTagName("img")[0];
  var src_value = img_elem.getAttribute("src");
  img_elem.setAttribute("src", "");
  img_elem.setAttribute("src", src_value);
}
'


ui <- fluidPage(useShinyjs(),
                extendShinyjs(text = jsCode),
                uiOutput('anim_plot1'),
                uiOutput('anim_plot2'),
                uiOutput('anim_plot3'),
                uiOutput('anim_plot4'),
                uiOutput('anim_plot5'),

                fluidRow(
                  column(3,  
                         actionButton("do_again", "Again")
                  )
                )
)