OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

用页面可见性(Page Visibility)API创建用户体验良好的网站


分享到
分类 JS学习   关键字 JavaScript   发布 ourjs  1422430857580
注意 转载须保留原文链接,译文链接,作者译者等信息。  
我们都有过这样的经验:启动浏览器后,会重新加载所有的tab页,声音和视频混合嘈杂。虽然你可以很容易对这方面进行控制,像MuteTab等,对于大多数人来说这是一种令人失望的用户体验。作为开发人员和设计师,我们应该让页面更加友好,而不能喧宾夺主。

网站只关注当前的激活标签,这难道没有有意义吗?我们为什么消耗电池和处理器,去播放那些看不到的画面呢?

值得庆幸的是,有一个解决方案:HTML5 Page Visibility API(页页能见度API)。你可以看到它在Active Theory 上面的应用:在点击另一个选项卡时,你会发现,视频和音乐暂停了。这种行为的网站是我喜欢的,我称之为“有礼貌的网站”:那些重视用户体验,节约带宽和电费的网站。

过去的开发人员通过,加入onblur()和onfocus()的事件侦听来解决。有总比没有强,但该方法无法判断该窗口对用户是否隐藏。例如,具有两个浏览器窗口并排排例,当onblur()和onfocus()事件响应时,内容其实仍然是完全可见的。

应用Page Visibility


使用Page visibility API有很多例子,这里有一个典型应用,当播放的视频对用户不可见时,就停止播放。


<video autoplay controls id="videoElement">
<source src="rar.mp4">
<source src="rar.webm">
</video>

<script>
var videoElement = document.getElementById("videoElement");
document.addEventListener("visibilitychange", function() {
  if (document.hidden) {
    videoElement.pause();
  } else {
    videoElement.play();
  }
});
</script>


上面的代码有点小问题,就是中断地太突然了,如果你使用的是jQuery,你可以通过animate为这种中断添加一些淡入淡出效果。


<script>
var videoElement = document.getElementById("videoElement");

document.addEventListener("visibilitychange", function() {
  if (document.hidden) {
    $("#videoElement").animate({volume: 0}, 1000, "linear", function() {
      videoElement.pause();
    });
  } else {
    videoElement.play();
    $("#videoElement").animate({volume: 1}, 1000, "linear");
  }
});
</script>


Spec规范


Page Visibility API标准是非常简单的,只有两个方法: document.hidden 根据当前窗口状态会返回 true 或 false; 相同的结果会以字符串的形式存储在 document.visibilityState 中('hidden'或'visible',还有额外的两个值: prerender 和 unloaded); visibilitychange 是可见度改变的事件。document.visibilityState 对于判断为什么当前文档不可见是很有帮助的,但是大多数情况下 document.hidden 已经够用了。

兼容性


Page Visibility API已经兼容各主流浏览器 ; IE10, Chrome, Firefox等。

Page Visibility API对浏览器也是无害的,当浏览器不支持时,它会被忽略。


原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 从一行CSS调试代码中学到的JavaScript知识
  2. 5个现在就该使用的数组Array方法: indexOf/filter/forEach/map/reduce详解
  3. AngularJS在大型单页面应用中的性能优化(二)
  4. 在nodejs中使用Redis缓存和查询数据及Session持久化(Express)
  5. 理解Node.js的事件循环(Event Loop)和线程池
  6. JavaScript中的$$(*)代表什么和$选择器的由来
  7. javaScript 依赖管理
  8. 中国互联网2014大事记
  9. 什么是Viewport Meta(width详解)及在手机上的应用
  10. io.js新支持的ECMAScript 6功能特性详解
  11. AirJD-简单好用的免费建站工具

 相关阅读 - JS学习
  1. 理解Node.js的事件循环(Event Loop)和线程池
  2. 从一行CSS调试代码中学到的JavaScript知识
  3. 在nodejs中使用Redis缓存和查询数据及Session持久化(Express)
  4. 在ExpressJS(NodeJS)中设置二级域名跨域共享Cookie
  5. 在(Raspberry Pi)树莓派上安装NodeJS
  6. 使用NodeJS将XML解析成JSON及性能比较
  7. 5个现在就该使用的数组Array方法: indexOf/filter/forEach/map/reduce详解
  8. AngularJS在大型单页面应用中的性能优化(二)
  9. AngularJS在大型单页面应用中的性能优化(一)
  10. WebPack:更优秀的模块依赖管理工具,及require.js的缺陷

 关键字 - JavaScript
  1. 40行JavaScript代码实现的3D旋转魔方动画效果
  2. 使用Javascript将相对路径地址转换为绝对路径
  3. 如何用CSS将select/option文本居中或居右对齐
  4. 给checkbox选择框设置不选中时的值
  5. 用原生HTML5控件实现输入框自动提示(下拉列表补全)功能
  6. JavaScript中怪异的地方
  7. 在JavaScript中创建命名空间的几种写法
  8. JavaScript中的继承,构造函数以及new关键字的作用
  9. 纽约时报使用Html5 WebRTC记录访问者IP地址
  10. 正则中test、exec、match的简单区别,以及括号的用法

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号