最近的一个项目,有个幻灯片,为了兼容,采用了jquery的animate,这个比css3来说,要消耗太多CPU了,可以到5%-10%之间,加上自动播放之后,其实有很多时候里用不到CPU.
1. HTML5 Page Visibility
当前页面不可见,既然看不到幻灯片,那么自动播放就没有意义了,可以在pageVisibilityState == ‘hidden’,停止幻灯片的播放;
document.addEventListener(prefixSupport + 'visibilitychange', function onVisibilityChange(e) {
if (document[prefixSupport + 'VisibilityState'] == 'hidden') {
clearTimeout(timer);
timer = null
} else if (document[prefixSupport + 'VisibilityState'] == 'visible') {
timer = setTimeout(autoPlay, interval)
}
}, false);
2. 页面已经滚动到了”幻灯片”下方
页面滚动到幻灯片下方后,幻灯片被遮挡住,这个时候既然看不到幻灯片,那么自动播放就没有意义了,也可以关掉;
var _offTop = _baner.offset().top + _baner.height();
_win.scroll(function() {
var _top = _win.scrollTop();
if (_top > _offTop) {
clearTimeout(timer);
timer = null
} else {
!timer && (timer = setTimeout(autoPlay, interval))
}
})
关于HTML5 Page Visibility可以参考这篇文章: http://kayosite.com/html5-page-visibility.html