单击按钮时刷新动画 Gif

Question

我已经被这个问题困住了一段时间，我需要一些帮助来弄清楚每次我点击一个按钮时如何“刷新”一个 gif 图像。 我为此尝试了大量的在线想法，但似乎没有一个有效。 它只会在我清除浏览器历史记录后播放 gif，所以我认为这可能是一些缓存问题。 有人可以发现我出错的地方或有任何关于如何解决这个问题的提示吗？

我的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>

我的 Javascript 功能：

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

Answer 1

我希望我在这里找到了答案！

让我引用：

在坚果壳中将图像加载到 javascript 变量中，然后在单击时更改 src

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

编辑： https : //jsfiddle.net/op3t82ea/2/

进行了一些更改和增强，并在代码中添加了注释！ 希望这可以帮助 ：）