Мой анимированный gif перестает работать через 2 минуты во всех браузерах

Я имею дело с анимацией потолочного вентилятора, и я использую 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;" />

2 ответа

  1. Проблема заключается в том, что gif был установлен на конечное число взаимодействий до остановки цикла. Вам нужно воссоздать gif так, чтобы было бесконечное количество итераций.