Refreshing Animated Gif on Button Click

Question

I have been stuck on this problem for a while now and I need some help trying to figure out how to "refresh" a gif image every time I hit a button. I have tried a ton of the online ideas for this but none of them seem to be working. It only will play the gif once I clear my browser history so I think it may be some caching problem. Can someone spot where I am going wrong or have any tips on how to fix this?

My html:

    <div class="logo">
        <button class="chains" id="chains" onclick="chains();"></button>
            <div id="png">
                <img src="images/logo.png" alt=""/>
            </div>
            <div id="gif">
                <img src="images/chains.gif" alt="" />
            </div>
    </div>

My Javascript function:

    <script language="JavaScript">
    $( document ).ready(function() {
        var myDiv = document.getElementById('gif');
        myDiv.style.visibility = "hidden";
    });

    function chains() {
            d = new Date();
            $("#gif").attr("src", "images/chains.gif?"+d.getTime());
            var logo = document.getElementById("png");
            var gif = document.getElementById("gif");

            var hide = function(){
              logo.style.visibility = "hidden";
              gif.style.visibility = "visible";
              setTimeout(show, 2300);  // 5 seconds
            }

            var show = function(){
              gif.style.visibility = "hidden";
              logo.style.visibility = "visible";
            }

            hide();
    };
</script>

I suggest you create an [example of the issue you are experiencing](http://stackoverflow.com/help/mcve). Also you should be very specific about the issue and avoid using broad or ambiguous terms like *"refresh"* which could interpreted differently by different people. Personally I am having trouble *"visualizing"* what your issue is. — justinw, Mar 24 '16 at 14:20
Hm, could you provide more information on what the point here is? You have a logo, and when you click the button a gif is playing; after 2300ms it switches back to the "static" logo? And when you hit the button again you want to to the same thing again? — Tommy, Mar 24 '16 at 14:33
I have an image that hides on button click and a gif shows itself in the same block once the original image is hidden. Once the gif shows itself it then should play for 2300ms and hide again and the original image shows itself again. All of that works except for when I try to do it again and the gif wont "play" the second time around. — FreeTheStudents, Mar 24 '16 at 14:33

score 1 · Answer 1 · edited May 23 '17 at 10:28

1

I hope I found the answer here!

Let me quote:

in a nut shell load the image into a javascript variable then change out the src on click

$(function(){
  var image = new Image();
  image.src='http://rack.3.mshcdn.com/media/ZgkyMDEyLzEwLzE5LzExXzMzXzMzXzE3Nl9maWxlCnAJdGh1bWIJMTIwMHg5NjAwPg/462b8072';
   $('#img').click(function(){
     $(this).attr('src',image.src);
   }); 
 });

EDITED: https://jsfiddle.net/op3t82ea/2/

Made some changes and enhancements and added comments in the code! Hope this helps :)

edited May 23 '17 at 10:28

Community

1
1

answered Mar 24 '16 at 14:20

Tommy

851
9
24

I have been looking at that tutorial you sent a lot. My problem is everytime I try and add it to my code it still dosen't work. Should I be adding it to the current chains() function or the document.ready() function? – FreeTheStudents Mar 24 '16 at 14:27
Pimped the Fiddle, please check it! Also, more jQuery there, hopefully it is more understandable – Tommy Mar 24 '16 at 15:08

Refreshing Animated Gif on Button Click

1 Answers1