javascript - 停止一段时间后重新启动 GIF 图像

Question

我已经设置了 GIF 图像并且它工作正常，但我有一个关于它的疑问，那就是如何在一段时间后重新启动该 GIF 图像而不刷新页面。

我进行了很多搜索，但任何解决方案都不适合我。

我设置了如下代码:

<script type="text/javascript">
        jQuery('document').ready(function(){
            function func() {
                //alert('Here');
                var d = new Date();
                var img = new Image();
                img.src = 'http://www.goldenswange.com/wp-content/uploads/2016/05/stoptyre.gif';
                jQuery("#gifimg").attr("src", img.src + '?s=' + d.getTime());
                timer = setTimeout(func, 30000)
            }
            var timer = setTimeout(func, 30000)
            /*setInterval(function(){
                //alert('hy');
                var d = new Date();
               // var img_path = 'http://www.goldenswange.com/wp-content/uploads/2016/05/stoptyre.gif?' + d.getTime();
               var img = new Image();
               img.src = 'http://www.goldenswange.com/wp-content/uploads/2016/05/stoptyre.gif';
               jQuery("#gifimg").attr("src", img.src + '?s=' + d.getTime());
            },32000);*/
        });
</script>

但是它运行得不太好。

任何帮助将不胜感激，并等待正确的答案。

您可以在这里看到:Link

Answer 1

尝试替换src，然后再次放入原始文件。这是一个例子。运行该代码片段并让我知道这是否适合您。

我使用了按钮来刷新图像，您可以根据您的场景使用。

function test1(){
jQuery('#myimg').attr('src','placeholder.png');
jQuery('#myimg').attr('src','http://www.goldenswange.com/wp-content/uploads/2016/05/stoptyre.gif');
}

#myimg{
  width:300px;
  height:300px;
  border:0px none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button onclick="test1();">
refresh image
</button>
<img id="myimg" src="http://www.goldenswange.com/wp-content/uploads/2016/05/stoptyre.gif" alt="dgfdgdf gfd gdfg fdsg dfs gdfsgdfsgdfg" />