页面可见性visibilitychange

1、介绍visibilityState

    HTML5新提供的一个api，作用是记录当前标签页在浏览器中的激活状态。所谓“激活状态”指当前标签是否正在被用户浏览。

2、应用场景

    监控用户行为，当用户的视角不在当前页面时，暂停加载广告，幻灯片、停止加载视频、开始加载小动画等。减少对用户宽带的占用，减少服务器压力，节省用户内存，以及到达更好的播放效果。

3、属性与事件

HTML5中专门为document元素添加了相关属性和事件：

属性：document.visibilityState

事件：document.addEventListener( "visibilitychange" , function(){})

4.注意事项

        在目前，浏览器对 Page Visibility 的支持还是通过私有属性支持，因此在检测或利用 Page Visibility 提供的属性时需要加上浏览器私有前缀，例如在 Chrome 中检测上面的 visibilityState 属性时，就需要检测 document.webkitVisibilityState 而不是 document.visibilityState 。所以，需要首先检测浏览器类型，然后才使用 Page Visibility 的 API 。

5.实现代码

var vibibleState ='';

var visibleChange ='';

if (typeof document.visibilityState !='undefined') {

visibleChange ='visibilitychange';

    vibibleState ='visibilityState';

}else if (typeof document.webkitVisibilityState !='undefined') {

visibleChange ='webkitvisibilitychange';

    vibibleState ='webkitVisibilityState';

}

if (visibleChange) {

document.addEventListener(visibleChange, function() {

if (document[vibibleState] =='visible') {

alert('页面可见');

        }

})

}

6.兼容版本

手机端开发基本分为ios和android端。

ios 7.1及以上都支持。6.1对应iPhone3.基本上不用考虑兼容问题，放心大胆的用。

android 端4.4及以上可以使用。android端低于4.4系统的手机市场量还是有一部分。使用这个属性时，基础功能引用了可能会引发问题。如果是优化功能的话，没有问题。

以下图片是该属性的兼容版本