Question

The jQuery .Cycle() Plugin is not working that good. When you go to another tab on your browser and then come back to the site, they are not cycling anymore. Like it causes it to break when you go to another tab for a few minutes. This is not good as it needs to keep on cycling through each images without any problems. Could someone 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>

You can see it in action here, it’s the monitor to the right:

http://weebuild1.yolasite.com/

Any help is highly appreciated. Thanks.

Answer 1

I think it has something to do with the fact that setTimeout gets forced to 1000 ms when a browser tab is no longer active. Turning on debug gives this message when it stops:

[cycle] transition active, ignoring new tx request

It ignores the request but doesn’t set a new timeout to continue the animation.

What you could do is restart the cycle when the tab regains focus:

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

I think this is more of a workaround than an actual fix.