Why is jQuery.cycle () plugin not working on my site?

Question

The jQuery.Cycle () plugin does not work so well. When you switch to another tab in your browser and then return to the site, they no longer ride a bicycle. As if it makes it break when you switch to another tab in a few minutes. This is not good, since he needs to constantly cycle through each image without any problems. Can anybody help?

My code is:

<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#iMac').fadeIn(2000).cycle(); $('#iMac2').click(function() { $.facebox({ div: '#video_dialog' }); }); }); </script> <span id="iMac" style="display:none;"> <img src="resources/images/blank.gif" id="iMac1" /> <img src="resources/images/blank.gif" id="iMac2" /> </span> 

Here you can see it in action, this is the monitor on the right:

http://weebuild1.yolasite.com/

Any help is greatly appreciated. Thank you

Answer 1

I think this has something to do with setTimeout getting a forced value of up to 1000 ms when the browser tab is no longer active. Enabling debug gives this message when it stops:

[loop] transition active ignoring new tx request

It ignores the request, but does not set a new timeout to continue the animation.

What you can do is restart the loop when the tab returns focus:

 $(window).focus( function() { $("#iMac").cycle("next"); }); 

I think this is more of a workaround than a real fix.