点击按钮刷新动画Gif

Refreshing Animated Gif on Button Click

本文关键字：动画 Gif 刷新 按钮      更新时间：2023-09-26

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

我希望在这里找到答案！

让我引用：

在坚果外壳中，将图像加载到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/

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

相关文章：