JavaScript 页面可见性-监听用户离开页面-visibilitychange 事件_js离开页面触发事件-程序员宅基地

技术标签: javascript  开发语言  

JavaScript监听用户离开页面-visibilitychange

博客首页:蔚说的博客
欢迎关注点赞收藏️留言
作者水平很有限,如果发现错误,求告知,多谢!
有问题可私信交流!!!
本文仅供学习交流,如有侵权请联系我删除

visibilitychange 事件触发原理

用户离开或者回到指定页面,document.visibilityState 属性发生变化
就会触发 visibilitychange 事件
因此,可以通过监听这个事件跟踪页面可见性的变化,

补充:document.visibilityState 属性

在 HTML5 中,文档对象(即 document 对象)具有一个visibilityState属性,该属性表示当前文档对象的可见性状态。

visibilityState 可能的取值有以下三种:

  • visible:表示文档当前处于激活状态,即当前选项卡处于前台或当前窗口处于屏幕最上层。
  • hidden:表示文档当前处于非激活状态,即当前选项卡处于后台或当前窗口被最小化或被其他窗口遮盖。
  • prerender:表示文档处于预渲染状态,即当前页面正在被预先加载并渲染,但尚未成为当前活动页面。

document.visibilityState属性是为了提高页面性能和节省资源而引入的新功能。在过去,开发人员通常会在页面上运行许多 JavaScript 动画或视频播放等操作,这些操作会消耗大量的 CPU、GPU 或网络带宽资源,从而影响页面的性能和响应速度。通过监视visibilityState属性,可以在用户切换选项卡或最小化窗口时暂停或恢复某些页面活动(如动画或视频播放)等操作,从而优化页面性能和用户体验。

代码实例:

document.addEventListener('visibilitychange', function () {
    
  // 用户离开了当前页面
  if (document.visibilityState === 'hidden') {
    
    document.title = '页面不可见';
  }

  // 用户打开或回到页面
  if (document.visibilityState === 'visible') {
    
    document.title = '页面可见';
  }
});
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/opinion001/article/details/131224500

智能推荐

在Google使用Borg进行大规模集群的管理 7-8-程序员宅基地

文章浏览阅读606次。为什么80%的码农都做不了架构师?>>> ..._google trace batch job

python加密字符串小写字母循环后错两位_python学习:实现将字符串进行加密-程序员宅基地

文章浏览阅读2.6k次,点赞3次,收藏3次。'''题目描述1、对输入的字符串进行加解密,并输出。2加密方法为:当内容是英文字母时则用该英文字母的后一个字母替换,同时字母变换大小写,如字母a时则替换为B;字母Z时则替换为a;当内容是数字时则把该数字加1,如0替换1,1替换2,9替换0;其他字符不做变化。s'''#-*-coding:utf-8-*-importre#判断是否是字母defisLetter(letter):iflen..._编写函数fun2实现字符串加密,加密规则为:如果是字母,将其进行大小写转换;如果

【Java容器源码】集合应用总结:迭代器&批量操作&线程安全问题_迭代器是否可以保证容器删除和修改安全操作-程序员宅基地

文章浏览阅读4.4k次,点赞6次,收藏8次。下面列出了所有集合的类图:每个接口做的事情非常明确,比如 Serializable,只负责序列化,Cloneable 只负责拷贝,Map 只负责定义 Map 的接口,整个图看起来虽然接口众多,但职责都很清晰;复杂功能通过接口的继承来实现,比如 ArrayList 通过实现了 Serializable、Cloneable、RandomAccess、AbstractList、List 等接口,从而拥有了序列化、拷贝、对数组各种操作定义等各种功能;上述类图只能看见继承的关系,组合的关系还看不出来,比如说_迭代器是否可以保证容器删除和修改安全操作

养老金融:编织中国老龄社会的金色安全网

在科技金融、绿色金融、普惠金融、养老金融、数字金融这“五篇大文章”中,养老金融以其独特的社会价值和深远影响,占据着不可或缺的地位。通过政策引导与市场机制的双重驱动,激发金融机构创新养老服务产品,如推出更多针对不同年龄层、风险偏好的个性化养老金融产品,不仅能提高金融服务的可获得性,还能增强民众对养老规划的主动参与度,从而逐步建立起适应中国国情、满足人民期待的养老金融服务体系。在人口老龄化的全球趋势下,中国养老金融的发展不仅仅是经济议题,更关乎社会的稳定与进步。养老金融:民生之需,国计之重。

iOS 创建开源库时如何使用图片和xib资源

在需要使用图片的地方使用下面的代码,注意xib可以直接设置图片。将相应的图片资源文件放到bundle文件中。

R语言学习笔记9_多元统计分析介绍_r语言多元统计分析-程序员宅基地

文章浏览阅读3.6k次,点赞4次,收藏66次。目录九、多元统计分析介绍九、多元统计分析介绍_r语言多元统计分析

随便推点

基于psk和dpsk的matlab仿真,MATLAB课程设计-基于PSK和DPSK的matlab仿真-程序员宅基地

文章浏览阅读623次。MATLAB课程设计-基于PSK和DPSK的matlab仿真 (41页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦!9.90 积分武汉理工大学MATLAB课程设计.目录摘要 1Abstract 21.设计目的与要求 32.方案的选择 42.1调制部分 42.2解调部分 43.单元电路原理和设计 63.1PCM编码原理及设计 63.1.1PCM编码原理 ..._通信原理课程设计(基于matlab的psk,dpsk仿真)(五篇模版)

腾讯微搭小程序获取微信用户信息_微搭 用微信号登录-程序员宅基地

文章浏览阅读3.5k次,点赞6次,收藏28次。腾讯微搭小程序获取微信用户信息无论你对低代码开发的爱与恨, 微信生态的强大毋庸置疑. 因此熟悉微搭技术还是很有必要的! 在大多数应用中, 都需要获取和跟踪用户信息. 本文就微搭中如何获取和存储用户信息进行详细演示, 因为用户信息的获取和存储是应用的基础.一. 微搭每个微搭平台都宣称使用微搭平台可以简单拖拽即可生成一个应用, 这种说法我认为是"夸大其词". 其实微搭优点大致来说, 前端定义了很多组件, 为开发人员封装组件节省了大量的时间,这是其一; 其二对后端开发来说, 省去了服务器的部署(并没有省去后_微搭 用微信号登录

sql中索引的使用分析

sql中索引的使用分析

termux安装metasploit()-程序员宅基地

文章浏览阅读8.9k次,点赞16次,收藏108次。因为呢,termux作者,不希望让termux变成脚本小子的黑客工具,于是把msf , sqlmap等包删了。至于如何安装metasploit呢。apt update -y && apt upgrade -y #更新升级更新升级之后要安装一个叫 git 的安装包apt install git -y然后我们就开始//这里的话建议把手机放到路由器旁边,保持网络的优良。或者科学上网。//git clone https://github.com/gushmazuko/metaspl_termux安装metasploit

armbian docker Chrome_一起学docker06-docker网络-程序员宅基地

文章浏览阅读141次。一、Docker支持4种网络模式Bridge(默认)--network默认网络,Docker启动后创建一个docker0网桥,默认创建的容器也是添加到这个网桥中;IP地址段是172.17.0.1/16 独立名称空间 docker0桥,虚拟网桥的工作方式和物理交换机类似,这样主机上的所有容器就通过交换机连在了一个二层网络中。host容器不会获得一个独立的network namespace,而是与宿主..._armbian 172.17.0.1

Ansible-Tower安装破解

Ansible-Tower安装破解。

推荐文章

热门文章

相关标签