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

智能推荐

Android音视频技术1--Android SurfaceView使用_surfaceview 首帧渲染回调-程序员宅基地

文章浏览阅读283次。开篇提到视频数据源渲染提到过SurfaceView,SurfaceView是Android提供的渲染图形类。一.SurfaceView简介Android平台图形渲染类。 主要由于游戏场景,适合频发绘制刷新的View。 Surfaceview可用于工作线程刷新View。 普通View为被动刷新,主动刷新则选择SurfaceView。二.SurfaceView与View的区别Sur..._surfaceview 首帧渲染回调

SpringMVC_@ControllerAdvice_springmvc controlleradvice-程序员宅基地

文章浏览阅读133次。SpringMVC_@ControllerAdvice一.全局异常处理二.全局数据绑定三.全局数据预处理新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表F..._springmvc controlleradvice

[LQR简要快速入门]+[一级倒立摆的LQR控制]-程序员宅基地

文章浏览阅读8k次,点赞34次,收藏127次。[LQR简要快速入门]+[一级倒立摆的LQR控制]1. 什么是LQR2. 公式含义3. 倒立摆的建模3.1 线性化3.2 状态空间建立4. LQR算法实现5. MATLAB代码仿真6. 优缺点1. 什么是LQRLQR是一种最优控制算法,简要讲即为寻求一种算法,使得在满足系统稳定性能的同时,系统在达到稳定的过程中消耗的能量也最少(具有实际意义)。利用最优控制理论的知识可以知道,既然要达到两个指标(1. 性能;2. 能量)的最优,可以很容易列出积分形式的最优指标:J=∫0∞(xTQx+uTRu)dt(1_lqr

anaconda: import numpy报错:ImportError: DLL load failed: 找不到指定的模块_anaconda import numpy 模块错误-程序员宅基地

文章浏览阅读795次。anaconda: import numpy报错:ImportError: DLL load failed: 找不到指定的模块在使用vscode 和anaconda时,在vscode中 import numpy,出现了以上报错可以查看是否未添加anaconda的环境变量具体参考如下文章,如何配置环境变量https://blog.csdn.net/Buster001/article/details/90025712..._anaconda import numpy 模块错误

c钩子库Minhook的使用_minihook使用 vs-程序员宅基地

文章浏览阅读5.4k次。简述最近在学习钩子库,逛了一下gay hub,发现了一个项目minhook,纯钩子库,甚合我意,就研究了一下,写了2个例子。后续打算研究一下这个钩子库的源代码,了解一下具体怎么实现的。例子例子就不贴到这上面了,给出github地址:minhook钩子库的使用示例例子vs2008编译通过,使用的dll,lib文件都是从minhook项目编译而来。minhook项目github地址..._minihook使用 vs

python 发布包_如何将自己的Python包发布到PyPI-程序员宅基地

文章浏览阅读150次。以前写过一篇类似的文章: 如何打包自己的项目并且发布到pypi上,不过由于PyPI进行了一些更新,因此旧方法不大适用了。趁端午有时间,想把haipproxy的客户端发布到PyPI,以改进用户体验,因此这次又尝试了如何将Python包发布到新版本的PyPI上。编写setup.py以haipproxy为例,它的setup.py如下from os import path as os_pathfrom s..._如何将python包推送到pipy

随便推点

RCE远程命令执行漏洞挖掘思路_rce漏洞挖掘-程序员宅基地

文章浏览阅读3.2k次,点赞3次,收藏19次。RCE漏洞存在的地方包括:在url参数上,文件下载处,在查看图片,查看文件等地方在文件删除上,SSRF可能存在的地方,变量参数提交的地方等_rce漏洞挖掘

[数据仓库]分层概念,ODS,DM,DWD,DWS,DIM的概念_ods层-程序员宅基地

文章浏览阅读10w+次,点赞118次,收藏518次。ODS是什么?ODS 全称是 Operational Data Store,操作数据存储.“面向主题的”,数据运营层,也叫ODS层,是最接近数据源中数据的一层,数据源中的数据,经过抽取、洗净、传输,也就说传说中的 ETL 之后,装入本层。本层的数据,总体上大多是按照源头业务系统的分类方式而分类的。但是,这一层面的数据却不等同于原始数据。在源数据装入这一层时,要进行诸如去噪(例如有一条数据中人的年龄是 300 岁,这种属于异常数据,就需要提前做一些处理)、去重(例如在个人资料表中,同一 ID 却有两条重复_ods层

Lucene介绍与使用-程序员宅基地

文章浏览阅读9.1w次,点赞237次,收藏928次。1、了解搜索技术1.1 什么是搜索简单的说,搜索就是搜寻、查找,在IT行业中就是指用户输入关键字,通过相应的算法,查询并返回用户所需要的信息。1.2 普通的数据库搜索类似:select * from 表名 where 字段名 like ‘%关键字%’例如:select * from article where content like ’%here%’结果: where here..._lucene

一个简单的协议定制_parseline-程序员宅基地

文章浏览阅读262次,点赞8次,收藏4次。socket、序列化和反序列化、自定义协议、一般服务器设计原则和各种场景_parseline

【RT-Thread】学习日记之系统节拍Tick_rt_tick_get-程序员宅基地

文章浏览阅读715次。RT-Thread 学习日记之系统节拍Tick_rt_tick_get

MySQL数据库——高级查询语句_mysql高级查询语句-程序员宅基地

文章浏览阅读5k次,点赞17次,收藏94次。数据库是用来存储数据,更新,查询数据的工具,而查询数据是一个数据库最为核心的功能,数据库是用来承载信息,而信息是用来分析和查看的。例:SELECT A.Store_Name Store, SUM(A.Sales) “Total Sales” FROM fxk003 A GROUP BY A.Store_Name;例:SELECT Store_Name, SUM(Sales) FROM fxk003 GROUP BY Store_Name HAVING SUM(Sales) > 1500;_mysql高级查询语句

推荐文章

热门文章

相关标签