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

发布于 2018-06-13 23:17:55 字数 1317 浏览 3010 评论 0

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

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

使用方法

//如果页面是可见的现在,
if( ifvisible.now() ){
     //显示的弹出
    openPopUp();
}

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

ifvisible.on("blur", function(){
    //动画暂停
    animations.pause();
});

ifvisible.on("focus", function(){
    //恢复所有动画
    animations.resume();
});

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

ifvisible.on("idle", function(){
    //停止自动更新的实时数据
    stream.pause();
});

ifvisible.on("wakeup", function(){
    //返回更新的数据
    stream.resume();
});

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

ifvisible setIdleDuration (120 )
//120秒后,将成为闲置

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

//如果页面是可见的运行这个函数上每隔半秒
ifvisible.onEvery(0.5, function(){
    //做一个动画的标志,只有当页面可见
    animateLogo();
});

在线示例地址:http://serkanyersen.github.io/ifvisible.js/demo.html

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

遥远的她

文章 0 评论 0

情深如许

文章 0 评论 0

18120987591

文章 0 评论 0

女皇必胜

文章 0 评论 0

13002228876

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。