HTML5 API详解（5）:Page Visibility API帮您省流量，提高体验

页面可见性API可以让你知道一个页面什么时候是隐藏的,什么时候是显示的.当页面被最小化或者被切换成后台标签页时,浏览器会触发一个 visibilitychange事件,告诉你用户已经看不到这个页面了,切换到显示状态的时候也同样。你可以给该事件注册监听函数,在页面的可见与不可见状态进行切换时,执行对应的操作。

用处

该API一个很好的用处就是能够在页面切换到不可见状态时暂停执行一些不必要的操作,以减少资源的浪费。

例子

在一个多标签的浏览器中,某个网页所在的标签页很有可能被切换到后台,这时,该网页是用户不可见的。一些网站很有可能希望在此时做出一些动作。

比如:

1.某网站有个图像幻灯片页面,自动播放图片。如果该页面被切换到了不可见状态,图片的播放操作应该暂停,直到该页面重新对用户可见时,幻灯片才会继续自动播放。

2.某web应用程序每隔一段时间会自动访问服务器更新页面内的及时信息。在页面不可见时,应该停止这种请求动作。

3.某页面想要检测自己是否被预渲染,这样可以获得更准确的页面访问量。

在过去,开发者使用一些不完善的手段间接的实现上述目的。例如通过使用onblur/onfocus事件,在当前页面失去焦点时得到通知。但这样仍然无法检测到正确的页面可见性(失去焦点并不意味着不可见,等等)。如今,页面可见性API可以办到了。

下面上个例子来实现：页面不可见时播放中的视频暂停，可见时视频继续播放

代码：

var video = document.getElementById('video') ;

var Prefix = null;

getHidden();

//获取当前浏览器的hidden属性

function getHidden(){

['webkit','ms','moz','o'].forEach(function(prefix){

if((prefix+'Hidden') in document){

Prefix = prefix;

}

});

if(Prefix == null){

alert('你的浏览器不支持Page Visibility API');

}

//为visibilitychange事件绑定处理程序

document.addEventListener(Prefix+'visibilitychange',handleVisibilityChange,false) ;

function handleVisibilityChange(){

switch (document.hidden){

//返回hidden = true，页面不可见

case true: video.pause();break;

//返回hidden = false，页面可见

case false:video.play();break;

}

</script>

DEMO地址，请点击“阅读原文”

HTML5 API详解（5）:Page Visibility API帮您省流量，提高体验相关推荐

Java 8 Stream API详解--转
原文地址:http://blog.csdn.net/chszs/article/details/47038607 Java 8 Stream API详解一.Stream API介绍 Java 8引入 ...
Java 8 Stream API详解
Java 8 Stream API详解一.Stream API介绍 Java 8引入了全新的Stream API,此Stream与Java I/O包里的InputStream和OutputStrea ...
HTML5新API详解之历史、地理位置处理、全屏处理
历史界面上的所有JS操作不会被浏览器记住,就无法回到之前的状态. 在HTML5中可以通过 window.history 操作访问历史状态,让一个页面可以有多个历史状态 window.history对 ...
ext核心API详解
http://hi.baidu.com/j2me/profile 1 EXT核心API详解(一)-Ext 1 EXT核心API详解(二)-Array/Date/Function/Number/Stri ...
H5的新特性及API详解（很惊人）
H5的新特性及API详解(很惊人) 2017-01-20 17:00 4057人阅读评论(0) 收藏举报分类: h5(11) js函数(64) js技巧(15) 版权声明:本文为博主原创 ...
百度PaddleOCR及云平台OCR API详解及示例
百度PaddleOCR及云平台OCR API详解及示例目录百度PaddleOCR及云平台OCR API详解及示例使用百度开源的PaddleOCR 多个开源代码库比较
【小白学PyTorch】扩展之Tensorflow2.0 | 21 Keras的API详解（下）池化、Normalization
<<小白学PyTorch>> 扩展之Tensorflow2.0 | 21 Keras的API详解(上)卷积.激活.初始化.正则扩展之Tensorflow2.0 | 20 TF ...
Android复习14【高级编程：推荐网址、抠图片上的某一角下来、Bitmap引起的OOM问题、三个绘图工具类详解、画线条、Canvas API详解（平移、旋转、缩放、倾斜）、矩阵详解】
目录推荐网址抠图片上的某一角下来 8.2.2 Bitmap引起的OOM问题 8.3.1 三个绘图工具类详解画线条 8.3.16 Canvas API详解(Part 1) 1.transla ...
EXT核心API详解(二)-Array/Date/Function/Number/String
EXT核心API详解(二)-Array/Date/Function/Number/String Array类 indexOf( Object o ) Number object是否在数组中,找不到返 ...

HTML5 API详解（5）:Page Visibility API帮您省流量，提高体验

HTML5 API详解（5）:Page Visibility API帮您省流量，提高体验相关推荐

最新文章

热门文章