0

I am using same gif image twice in a page. Both the images will be hidden initially. Based on certain criteria I am showing those gif images (when clicked on particular target one gif image will be shown at a time). I am unable to reload the gif image. See the attached plunker

1) https://plnkr.co/edit/vqZCHkyq7zCRCLpe9osF?p=preview

    <script>
    var img1 = document.getElementById("img1");
    var img2 = document.getElementById("img2");

    function toggle1() {
        if (document.getElementById('gif-1').style.display == "none") {
            document.getElementById('gif-1').src = '';
            document.getElementById('gif-1').src = 'http://insightgraphicdesign.net/wp-content/uploads/2014/07/coke-responsive-logo.gif';
            document.getElementById('gif-1').style.display = "block";
        } else
            document.getElementById('gif-1').style.display = "none";
    }

    function toggle2() {
        if (document.getElementById('gif-2').style.display == "none") {
            document.getElementById('gif-2').src = '';
            document.getElementById('gif-2').src = 'http://insightgraphicdesign.net/wp-content/uploads/2014/07/coke-responsive-logo.gif';
            document.getElementById('gif-2').style.display = "block";
        } else
            document.getElementById('gif-2').style.display = "none";
    }
</script>

But if I use one gif image it is working properly, see this plunker (sometimes it is not working may be plunker blocking due to security. better put it in a html and check)

2) https://plnkr.co/edit/74huqUZmkoc6T6BdNOlz?p=preview

    <script>
    var img1 = document.getElementById("img1");

    function toggle1() {
        if (document.getElementById('gif-1').style.display == "none") {
            document.getElementById('gif-1').src = '';
            document.getElementById('gif-1').src = 'http://insightgraphicdesign.net/wp-content/uploads/2014/07/coke-responsive-logo.gif';
            document.getElementById('gif-1').style.display = "block";
        } else
            document.getElementById('gif-1').style.display = "none";
    }

</script>

can anyone help me to make the plunker 1 to work? (both gif images should reload whenever I click the two buttons).

Thanks, HariKrishnan P

Pete
  • 57,112
  • 28
  • 117
  • 166
Hari Krishnan
  • 191
  • 1
  • 1
  • 8
  • @Pete first time it is working. second time if you click on the buttons, the animation in the gif file is not working. I want the animation to happen everytime when I show the gif image. – Hari Krishnan Jan 11 '17 at 14:32
  • Yeah sorry, didn't see it was an animated gif, but in answer to your question, you need to add some sort of querystring time tamp on the end to get it to reload – Pete Jan 11 '17 at 14:33
  • I fixed your plunker: https://plnkr.co/edit/vqZCHkyq7zCRCLpe9osF?p=preview – Robert Fines Jan 11 '17 at 14:38
  • @RobertFines that seems to be a link to the original plunkr – Pete Jan 11 '17 at 14:44
  • Well plunker is being dumb and won't let me save the edits, so I guess I will just copy and paste it here... As suggested in the linked thread: function toggle1() { var ts = new Date().getTime(); //get a new timestamp .... document.getElementById('gif-1').src = 'http://insightgraphicdesign.net/wp-content/uploads/2014/07/coke-responsive-logo.gif?ts='+ts; //add the timestamp on to the end of the url as a query string variable to get a fresh copy. .... } Do the same thing in the toggle2 method and you will be good to go. – Robert Fines Jan 11 '17 at 14:52

0 Answers0