Question

I am trying to build a fullsized background-slider that stops playing when the tab/window is inactive and continues when it’s focused.

The problem is that Chrome and Safari both don’t do anything on loading/refreshing the page – you have to click out- and then inside the window for them to start the animation.

Is there any way to avoid this?

This is my code so far:

$(window).load( function(){ 
    var autopager;

    function startAutopager() {
        autopager = window.setInterval("slideSwitch()", 5000);
    }

    function stopAutopager() {
        window.clearInterval(autopager);
    }

    window.addEventListener('focus', startAutopager);   
    window.addEventListener('blur', stopAutopager);

    slideSwitch();
    $("#sliderContent img").fullBg();
});

This starts the animation for both browsers but when I click outside the window again it won’t stop:

if(true == $.browser.safari || true == $.browser.chrome) {
    startAutopager();
}

Hope someone can help.

Cheers!

Answer 1

Try this and let me know in a comment how it goes. 🙂

$(function(){
  $("#sliderContent img").fullBg();

  var autopager;
  function startAutopager() {
    if (autopager) window.clearInterval(autopager);
    autopager = window.setInterval("slideSwitch()", 5000);
  }
  function stopAutopager() {
    window.clearInterval(autopager);
  }
  window.focus(startAutopager);   
  window.blur(stopAutopager);
  startAutopager()
});