My animated gif stops working after 2 mins in all browsers

Question

I am dealing with ceiling fan animation and I use a png image when the fan is off and a gif image when it's on .

My image is switched successfully and the gif is displayed to indicate my fan is on . But after 2 mins my gif file stops working in all browsers.

How can I resolve that?

Here is my code:

 $(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

The issue is that the gif has been set to a finite number of interations before the looping stops. You need to re-create the gif so that there are infinite number of iterations.

Answer 2

I have added the loop in your gif image please download from below URL

https://i.imgsafe.org/8b8138e463.gif