How can I force on buttons click GIF image wrapped in <picture> with many srcset to reload?

JavaScript
,
1

Hi everyone,

I have multiple GIF (not looping) images that are structured in HTML like this : a picture element containing srcset attribute wrapped in source element and still in same picture element an img element with src attribute.
On ‘click’ event I want the GIF images to reload, I mean GIF only plays once and freeze at last frame with no possibility to avoid browser caching.
GIFs are less than 1Mo, so it doesn’t matter to me if it reloads after every click

Here is what I tried according to many topics in many different websites :

  • using Jquery and in particular attr() method to force the GIF to reload
$("#refresh").click(function() {
  var srcGif1 = $("#gif1").attr("src");
  $("#gif1").find('img').attr("src", srcGif1);
});
  • try to prevent page from caching with
<head>
<meta http-equiv="Cache-Control" content="no-store"/>
</head>
  • using Javascript kind of ‘magic’ formula that is supposed to do the job :
img.src = "images/GIF/dance1_1920.gif"+"?a="+Math.random();

Problem is that I have multiple other img in this page and this formula doesn’t work in my case

HTML of picture element :

                <picture class="pic animation1"> 
                    
                    <source class="animation1"
                            media="(orientation: landscape)"
                            srcset="images/GIF/dance1_1920.gif 1920w,
                                    images/GIF/dance1_1440.gif 1440w,
                                    images/GIF/dance1_960.gif 960w,
                                    images/GIF/dance1_800.gif 800w,
                                    images/GIF/dance1_600.gif 600w"
                            sizes="100vw">
                                   
                    
                    <source class="animation1"
                            media="(orientation: portrait)"
                            srcset="images/GIF/dance1_portrait_600.gif 600w,
                                    images/GIF/dance1_480.gif 480w,
                                    images/GIF/dance1_320.gif 320w"
                            sizes="100vw">
                    
                    <img src="images/GIF/dance1_1920.gif" class="animation1" id="gif1" width="710" height="600" alt="dance animation"/>
                
                </picture>

<button type="button" id="refresh" tabindex="1" >BTN-CLICK</button>

I have a few knowledge in HTML5 and CSS3 though my Javascript/Jquery level is beginner.
My question is simple : How can I force on button click GIF image that is displaying to reload/restart with Jquery or Javascript or both combined. Even in Angular, Vue.js or React ? (I’m ready to learn those libraries to make it work if necessary)

I tested many solutions that are all over the web but nothing works. What is the reason for that? Is it a picture element process that I don’t know yet? Do Jquery and Javascript need to change srcset and src attribute at same time? Does someone have a global solution to force each GIF images to reload or restart? Is changing src only enough to achieve that? It seems quite impossible to me, please help.
Even a PHP solution can be appreciated (even if I know nothing about PHP I’m ready to learn it to succeed in this task that is about to make me mad)

Thank you for your kind help and for participating to this amazing worldwide community.

I hope everyone stays healthy . :wink:

2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.