1、介绍visibilityState
这是一个HTML5新提供的一个api，主要作用就是记录当前标签页在浏览器中的激活状态。所谓“激活状态”指的是当前标签是否正在被用户浏览。
2、应用场景
监控用户行为，当用户的视角不在当前页面时，暂停加载广告，幻灯片、停止加载视频、开始加载小动画等。减少对用户宽带的占用，减少服务器压力，节省用户内存，以及到达更好的播放效果。
3、属性与事件
HTML5中专门为document元素添加了相关属性和事件：
属性：document.visibilityState
事件：document.addEventListener( "visibilitychange" , function(){})
4、实例
当用户在浏览器标签页间切换时，监控当前页面的状态，是否为最上层标签，决定是否开始or暂停视频：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="con"></div>
</body>
<script src="jquery/jquery-2.2.3.js"></script>
<script type="text/javascript">
document.addEventListener("visibilitychange",function(){
if(document.visibilityState=="visible"){
console.log("欢迎回来！")
//do something
//继续视频播放
}
if(document.visibilityState=="hidden"){
console.log("不要走！")
//do something else
//暂停视频播放
}
})
</script>
</html>
2123
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
