Geek Answers Handbook

Jquery: slide show, when you are on a different tab of the browser a little, then go back to the tab with the slide show, it will turn out

http://jsfiddle.net/nicktheandroid/B7Rhe/8/

In Chrome, when the browser tab is inactive, chrome slows down any setInterval that only happens every second, even if my slideshow runs every two seconds, it still gets confused.

go to the page above and see how the slideshow is located there, now click on another tab in the browser window, spend about 15 seconds there, then click on the tab with the slideshow, the slideshow will try to quickly fade out and each slide comes out to get into it. But then I look at these simple slide shows, and this does not happen to them:

http://jonraasch.com/blog/a-simple-jquery-slideshow

Then on Jonathan Snook’s small slideshow, it’s a mess like mine, but the plugin was made from his script, and the plugin example didn’t ruin ...?

1 (mess) Jonathan Snook script: http://snook.ca/technical/fade/fade.html

2 (will not ruin) Plugin above: http://mathiasbynens.be/demo/slideshow

QUESTION: why is my mess, and Jonathan Snooks ruined when his version of the plugin does not work, and the slide show of John Rush also does not ruin?

I found several other SO questions that relate to this, but they did not have the answer I needed. jquery only, just for reference here in SO:

var x = 2; console.log('Not broken'); $('.slideshow li:gt(0)').css({opacity:0}); setInterval(function() { var m = $('.slideshow li').size(); x += 1; if (x > m) { x = 1; } $(".slideshow ul li:visible").animate({ opacity: 0 }); $(".slideshow ul li:nth-child(" + (x) + ")").animate({ opacity: 1 }); }, 2000);
+4
source share
2 answers

After examining and testing your link links, working and broken ... I see that the link works fine in Chrome, actually uses jquery-1.3.2 . It seems to work fine in Chrome using the old jQuery environment.

See update link: http://jsfiddle.net/B7Rhe/10/

+2
source

Just do the following:

 setInterval(function() { var m = $('.slideshow li').size(); x += 1; if (x > m) { x = 1; } $(".slideshow ul li:visible").stop(true,true).animate({ opacity: 0 }); $(".slideshow ul li:nth-child(" + (x) + ")").stop(true,true).animate({ opacity: 1 });

}, 2000);

Inactive browser tabs contain some setInterval or setTimeout functions. stop (true, true) - stops all buffered events and imperceptibly only the last animation.

Now the window.setTimeout () method clamps to send no more than one timeout per second on inactive tabs. In addition, it now captures nested timeouts to the smallest value allowed by the HTML5 specification: 4 ms (instead of the 10 ms that it used to commit).

0
source

More articles:


All Articles