Problem when reloading an animated GIF in Chrome

[Mikel N]

Hi all,

I'm facing a strange problem when reloading an animated GIF that only shows when using Google Chrome (Firefox and Internet Explorer don't show the problem). I've tested it in Chrome 42.0.2311.90, Firefox 37.0.1 and Internet Explorer 9.0.8112.16421.

I want to include an animated GIF that shows a 1-second animation (it does not loop forever, i.e. it shows the animation and ends) in my Shiny application. More specifically, I want to show the animation every time an action button is pressed.

I have included in my ui.R file an imageOutput ("animated_image", the placeholder for the animated gif) and the corresponding actionButton ("show").

Then I have included the following code in my server.R file:

output$animated_image <- renderImage({

    input$show

    list(src="www/anim_1.gif")

}, deleteFile = FALSE)

when I load the application on Chrome, the animation only runs once (the first time the code is run). After that, whenever I press the button the image stays the same, just showing the last frame of the animated GIF. However, if I load it on Firefox or IE the application behaves as desired, i.e. the animation runs each time I press the button.

Fearing some problem related with image caching, I created a second version of the animated GIF with a slight modification in some pixels (so that it doesn't identify it as the same file) and stored it as "anim_2.gif". After that, I modified the code so that it loads alternatively the 1st or the 2nd version, hoping that the browser sees it as a different image than the previous one. This is the code (variable COUNT is previously initialized with 0):

output$animate_image <- renderImage({

    COUNT <- COUNT + input$show

    if (COUNT %% 2 == 0){filename="www/anim_1.gif"} 

        else {filename="www/anim_2.gif"}

    list(src=filename)

}, deleteFile = FALSE)

In this case, the animation runs just twice (the first time the code is run, and after pressing the button for the first time). After that, it seems like Chrome detects that I'm trying to load an image that has already been loaded before (even if it is not the immediate previous one) and "refuses" to load the animation again. Firefox and IE still work fine.

I've also tried some solutions I found for related problems in other contexts, e.g. adding a random number as an additional parameter in the URL, like this:

list(src=paste0("www/anim_1.gif?x=",abs(rnorm(1))))

but that doesn't work in this case, as Shiny can't find the image with that tweaked URL.

Any ideas on how can I solve this problem that only shows in Chrome?

Thanks,

Mikel

[Winston Chang]

The reason that changing the name with a '?' won't make a difference is because Shiny actually converts the image to a base64 encoded string, and sends that over to the browser. So the browser doesn't see a '?' at all, just the image data.

It sounds like this may be related to the way that Chrome caches images:

http://stackoverflow.com/questions/10730212/proper-way-to-reset-a-gif-animation-with-displaynone-on-chrome

There's also a bit of JS code at the link which says it will restart a gif, though it may be a bit of work to get that to work with Shiny. You might be able to bypass Shiny entirely and just show/hide the content when a button is pressed, by creating a button with an onclick property:

  <button onclick="myFunction()">Click me</button>

To generate that same code in Shiny, you'd do something like:

  tags$button(onclick = "myFunction()", "Click me")

And then you'd have to embed Javascript code in your app to implement myFunction().

-Winston

--
You received this message because you are subscribed to the Google Groups "Shiny - Web Framework for R" group.
To unsubscribe from this group and stop receiving emails from it, send an email to shiny-discus...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/shiny-discuss/f13970a9-4902-427f-b82b-cd2c76dc9e00%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Mikel N]

Thank you very much, Winston! I have solved the problem following your suggestions.

Now my ui.R code looks like this:

sidebarLayout(

    sidebarPanel(.....

        tags$button("show", onclick = "reset_anim()"),

        .....

    ),

    mainPanel(.....

        div(imageOutput("animated_image"), .....),

        .....,

        tags$head(tags$script(src="script.js"))

    )

)

And script.js (stored in the www folder) contains the following JavaScript code:

function reset_anim() {

    var div_elem = document.getElementById("animated_image");

    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);

}

Now everything works like a charm in all browsers, thanks!

Cheers,

Mikel