Ifvisible.js 检查当前网页是否处于激活状态

Ifvisible.js 是一个跨浏览器、轻量级的方式,用户检查用户在浏览页面或正在与它进行交互。它可以处理活动状态,如在页面上空闲或活跃。您还可以使用 ifvisible.js 智能设置您的间隔,如果用户是空闲或没有看到页面的间隔时间会自动停止。

在示例网页中,空闲持续时间设置为 30 秒,这样您就可以轻松地看到效果,如果在 30 秒的时间内,该网页没有任何来自用户的操作,那么网页将添加一个白色透明蒙版。

使用方法

 
  1. //如果页面是可见的现在,

  2. if( ifvisible.now() ){

  3. //显示的弹出

  4. openPopUp();

  5. }

手柄开关选项卡或浏览器最小化状态

 
  1. ifvisible.on("blur", function(){

  2. //动画暂停

  3. animations.pause();

  4. });

  5. ifvisible.on("focus", function(){

  6. //恢复所有动画

  7. animations.resume();

  8. });

能够处理 ifvisible.js 活动状态,如空闲或活动页面上

 
  1. ifvisible.on("idle", function(){

  2. //停止自动更新的实时数据

  3. stream.pause();

  4. });

  5. ifvisible.on("wakeup", function(){

  6. //返回更新的数据

  7. stream.resume();

  8. });

默认的空闲等待时间是 60 秒,但你可以改变它用 setIdleDuration 方法

 
  1. ifvisible setIdleDuration (120 )

  2. //120秒后,将成为闲置

您可以设置智能间隔与 ifvisible.js,如果用户是空闲或没有看到页面的间隔时间会自动停止

 
  1. //如果页面是可见的运行这个函数上每隔半秒

  2. ifvisible.onEvery(0.5, function(){

  3. //做一个动画的标志,只有当页面可见

  4. animateLogo();

  5. });

在线示例地址:ifvisible.js test page

 

https://github.com/serkanyersen/ifvisible.js/

 

  • 5
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值