css中visibility属性,jquery visibility属性
这里必须说明的是，这个“激活”指的是这个标签页是否正在被用户浏览，或者是否是当前标签页。
那么，这个API的目的是什么呢？通常，当用户不激活它时，许多传统页面将继续工作。比如用户在浏览新闻门户时，之前打开的NBA比赛页面会不断刷新以获取最新结果，视频网站会不断占用带宽和负载资源。所以，如果这种不必要的工作太多，就会浪费很多资源。因此，这种产品相当有用：
1.Web程序会每隔一段时间自动更新页面信息，以确保用户获得及时的信息。但是，当用户正在浏览其他页面时，他们可以控制它暂停更新。
2.视频网站在播放网络视频时会一直加载视频，直到视频加载完毕。但是，当用户在浏览其他页面时，可以暂停加载视频资源以节省带宽。
3.网站首页有一个自动播放的大幻灯片。当用户浏览其他页面时，可以暂停播放。
因此，通过页面可见性，我们至少可以获得以下一个或几个好处：
1.节省服务器资源。Ajax轮询等对服务器资源的占用往往被忽略。关闭此请求可以节省资源。
2.节省内存消耗。
3.节省带宽消耗。
因此，使用页面可见性对用户和服务器都有好处。
接下来，我们正式介绍一下这个API。页面可见性为浏览器的文档对象添加了两个属性hidden和visibilityState。如果当前标签被激活，那么document.hidden的值为false，否则为true。VisibilityState有四个可能的值：
1.hidden:当浏览器最小化、切换选项卡、计算机屏幕锁定时，visibilityState值是隐藏的。
2.visible:当浏览器的顶层上下文的文档显示在至少一个屏幕中时，返回visible当浏览器窗口没有最小化，但浏览器被其他应用程序阻止时，它也是可见的。
3.prerender:当文档加载到屏幕外或不可见时，返回prerender。这是一个不必要的属性，浏览器可以有选择地支持。
4.unloaded:当文档即将卸载时返回unloaded，浏览器可以选择支持该属性。
此外，visibilitychange事件将被添加到文档中，该事件将在文档的可见性发生变化时触发。
好了，介绍完属性，放上一个使用示例(复制代码保存到HTML文件，打开后切换标签测试效果)。
复制代码如下：
！声明文档类型
html lang=zh-CN
头
meta charset=UTF-8 /
测试HTML5页面可视性API/title
/头
body/pp div id=showTip/div
脚本
函数browerKernel(){
var结果；
[webkit ， moz ， o ， ms]。forEach(function(prefix){/PP if(type of document[prefix Hidden ]！=未定义){
结果=前缀；
}
});
返回结果；
}
函数init(){
prefix=browerKernel()；
var show tip=document . getelementbyid( show tip )；
document.addEventListener(前缀 visibilitychange ，函数onVisibilityChange(e){
var tip=null
if(document[prefix visibility state ]= hidden )tip= pLeave the page/p ；
else if(document[前缀 visibility state ]= visible )tip= pEnter the page/p ；
show tip . innerhtml=show tip . innerhtml tip；
});
}
window . onload=init()；
/脚本
/body
/html
该实例的作用是监控标签的可见性是否发生变化，并在标签的可见性发生变化时生成提示。
值得注意的是，目前浏览器对页面可见性的支持仍然是私有属性支持的，所以在检测或利用页面可见性提供的属性时，需要添加浏览器的私有前缀。比如在Chrome中检测上述visibilityState属性时，需要检测document.webkitVisibilityState而不是document.visibilityState，所以在Demo中会先检测浏览器类型，然后使用页面可见性的API。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。