按钮单击时刷新动画 Gif答案

【问题标题】：Refreshing Animated Gif on Button Click按钮单击时刷新动画 Gif
【发布时间】：2016-07-12 03:59:55
【问题描述】：

我已经被这个问题困扰了一段时间，我需要一些帮助来尝试弄清楚每次点击按钮时如何“刷新” 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>

【问题讨论】：

我建议你创建一个example of the issue you are experiencing。此外，您应该非常具体地了解该问题，并避免使用诸如 "refresh" 之类的宽泛或模棱两可的术语，这些术语可能会被不同的人做出不同的解释。就我个人而言，我无法“可视化”您的问题是什么。
嗯，你能提供更多关于这里的意义的信息吗？你有一个标志，当你点击按钮时，一个 gif 正在播放； 2300 毫秒后它切换回“静态”标志？当你再次按下按钮时，你想再次做同样的事情吗？
我有一个在按钮单击时隐藏的图像，一旦原始图像被隐藏，一个 gif 就会显示在同一个块中。一旦 gif 显示出来，它应该播放 2300 毫秒并再次隐藏，原始图像再次显示出来。所有这些都有效，除了当我尝试再做一次并且 gif 不会“播放”第二次。

标签： javascript jquery html css gif

【解决方案1】：

希望我找到了答案here!

让我引用：

简而言之，将图像加载到 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/

进行了一些更改和增强，并在代码中添加了 cmets！希望这会有所帮助:)

【讨论】：

我一直在看你发来的那个教程。我的问题是每次我尝试将它添加到我的代码中它仍然不起作用。我应该将它添加到当前的chains() 函数还是 document.ready() 函数中？
拉小提琴，请检查！另外，那里有更多的 jQuery，希望它更容易理解