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

我有一个可以重新加载 gif 动画的应用程序。它在 Safari 中始终有效，但在 Chrome 中时断时续。我相信这个问题与提到的问题类似here https://groups.google.com/forum/#!topic/shiny-discuss/9SB_uNg019M.

我对 Javascript 的了解可以忽略不计。然而，阅读this https://stackoverflow.com/questions/31346558/how-can-i-get-a-button-in-shiny-to-call-both-javascript-and-r-code-in-parallel，我想出了这个例子，仍然不行。使用 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 https://www.dropbox.com/s/ll0six5rrxkn2b2/ani.gif?dl=0.

我避免使用 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)  

UPDATE:
www 文件夹中包含服务器文件、ui 文件和 5 个 gif 的应用程序： 我刚刚下载了 5 个随机 gifgiphy http://giphy.com，并做了一个不循环的ezgif.com https://ezgif.com/，将它们存储为 gif1.gif、gif2.gif 等。

@OP：请记住，您的 javascript 目标是 1 个特定的 gif 对象。如果你想重新加载另一个 gif，你必须重写你的 javascript 以获取输入参数，我猜这将是你希望重新启动的 anim_plot 的名称。我不是 javascript 专家，所以我不会尝试在此处添加它，但如果您这样做，请随时将其添加到此处的信息中

附注1：不要将“www/”放入您的 src 参数中。 Shiny 会自动查找 www 文件夹内部。 。

p.s 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")
                  )
                )
)