Проблема при перезагрузке анимированного GIF в Chrome

1

У меня есть приложение, которое перезагружает анимированный GIF. Он работает все время в Safari и периодически в Chrome. Я считаю, что проблема похожа на упомянутую здесь.

Мои знания Javascript незначительны. Однако, читая это, я придумал этот пример, который все еще не работает. Используя 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 здесь.

  • 0
    Вы также используете V8 ? Я думаю , что настоятельно рекомендуется в shinyjs документации
  • 0
    Я не знал о V8, пока вы не упомянули об этом. V8 - интерфейс R к движку JavaScript с открытым исходным кодом Google.
Показать ещё 2 комментария
Теги:
shiny
shinyjs

1 ответ

2
Лучший ответ

Я избегаю использовать 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)  

ОБНОВИТЬ:
Приложение с файлом сервера, файлом пользовательского интерфейса и 5 гифками в папке www: я только что скачал 5 случайных гифок с giphy и сделал один, чтобы не зацикливаться на ezgif.com, сохранил их как gif1.gif, gif2.gif и т.д.

@OP: имейте в виду, что ваш javascript нацелен на 1 конкретный объект gif. Если вы хотите перезагрузить другой gif, вам придется переписать свой javascript, чтобы получить входной аргумент, который будет именем вашего anim_plot n, который вы хотите перезапустить, я думаю. Я не эксперт по javascript, поэтому я не буду пытаться добавить это здесь, но если вы это сделаете, не стесняйтесь добавлять это к информации здесь

PS 1: не ставьте "www/" в аргументе src. Shiny автоматически заглядывает в папку www. ,

PS 2: имейте в виду, что некоторые вещи не работают во внутреннем интерфейсе RStudio, и настройте его для запуска блестящих приложений извне, нажав кнопку "Run external" в крошечном меню со стрелкой, которое находится справа от "Run App". кнопка воспроизведения.

# 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")
                  )
                )
)

Изображение 174551

  • 0
    Я создаю анимированный GIF и храню его локально. Когда я переключаюсь на ваш подход renderUI, он отображает первый прекрасный анимированный GIF. Тем не менее, он не отображает последующие анимированные GIF-файлы, хотя я вижу, что файл был создан правильно. Связана ли эта проблема с вашим комментарием: «(внешние URL-адреса) я считаю работу лучше, чем локально сохраненный»? Любые мысли о том, как заставить местные GIF-файлы работать?
  • 0
    Я предлагаю вам принять этот ответ, а затем опубликовать новый вопрос со сценарием, который вы описали. Я посмотрю на это тогда и позже сегодня я протестирую этот единственный gif для вас с локальным хранилищем. Что вы имеете в виду под правильно созданным
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню