Question

我一直坚持这个问题已经有一段时间了，我需要一些帮助，试图找出如何＆＃34;刷新＆＃34;每次按下按钮时都会显示一个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

我希望我找到答案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/

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

按钮上的刷新动画GIF单击

1 个答案: