javascript - 我的动画 gif 在所有浏览器中 2 分钟后停止工作

Question

我正在处理吊扇动画，当风扇关闭时我使用png图像，当它时使用gif图像>上。

我的图像已成功切换并显示 gif 以指示我的风扇打开。但是 2 分钟后，我的 gif 文件在所有浏览器中都停止工作了。

我该如何解决？

这是我的代码:

$(function() {
	var hit2 = 0;
	$('#tfanonoff').click(function() {
    	if  (hit2 % 2 !== 0) {
            $("#foff").fadeIn().animate({'display':'inline-block'},1000);
    		$("#fon").fadeOut(1000);
    	} else { 
    		$("#foff").fadeOut().animate({'display':'none'},1000);
    		$("#fon").fadeIn().animate({'display':'inline-block'},1000);
        }
        hit2++;
        return false;
	});
});

.ceiling-fan {
    max-width: 20%; 
    display: inline-block; 
    text-align: center; 
    left: 41%;  
    position: absolute; 
    transform: rotateX(-58deg);
}

<img id="foff" class="img-responsive ceiling-fan" src="img/fanoff.png" alt="static-img" />
<img id="fon" class="img-responsive ceiling-fan" loop=infinite src="http://animationsa2z.com/attachments/Image/fans/ventilator4.gif" 
    style="display:none;" />

Answer 1

问题是 gif 在循环停止之前已设置为有限的交互次数。您需要重新创建 gif，以便进行无限次迭代。