load、unload和pagehide、pageshow

一、load、unload和pagehide、pageshow的主要应用

1)load 和 unload 事件监听web页面的进入和离开,一般用于页面的首次加载、刷新和关闭等操作的监听;
2)pageshow 和 pagehide 事件多用于监听浏览器的前进和后退等。

二、pageshow和load事件的区别

1、pageshow和load区别

pageshow 事件类似于 load 事件,load 事件在页面第一次加载时触发, pageshow 事件在每次加载页面时触发,即 load 事件在页面从浏览器缓存中读取时不触发

一般情况下,移动端浏览器会将当前已访问页面存入缓存中,缓存中保存着页面数据,DOM和js的状态,前进和后退操作时直接从浏览器缓存中读取页面内容,而不进行页面刷新,所以监听前进和后退操作时可用pageshow事件。

触发时间:load先触发,pageshow后触发。

2、查看是否读取缓存

为了查看页面是直接从服务器上载入还是从缓存中读取,你可以使用 Event 对象的 persisted 属性来判断。 如果页面从浏览器的缓存中读取该属性返回 ture,否则返回 false

示例:

window.addEventListener('pageshow', function(event) {console.log(event.persisted);
})

三、pagehide和unload事件的区别

1、pagehide和unload区别

pagehide 事件类似于 unload 事件,在用户离开网页时触发(如点击一个链接、刷新页面、提交表单、关闭浏览器、前进、后退等)。

页面缓存:pagehide触发可以缓存页面,但unload 事件触发后无法缓存。

触发时间:pagehide先触发,unload后触发。

2、查看是否读取缓存

// 同pageshow
window.addEventListener('pagehide', function(event) {console.log(event.persisted);
})

四、pageshow和pagehide应用场景

当我们需要在浏览器前进或后退时执行某个操作时,可监听pageshow和pagehide事件。

五、pageshow和pagehide的浏览器兼容性

在这里插入图片描述六、总结 

区别:

  1. load 页面第一次加载时触发,前进或后退使用缓存不会触发
  2. pageshow 页面每次展示都会触发,前进或后退使用缓存会触发
  3. pageshow 包含 load
  4. 触发时机:load先触发,pageshow后触发。pagehide先触发,unload后触发。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/74688.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【雕爷学编程】 MicroPython动手做(38)——控制触摸屏2

MixPY——让爱(AI)触手可及 MixPY布局 主控芯片:K210(64位双核带硬件FPU和卷积加速器的 RISC-V CPU) 显示屏:LCD_2.8寸 320*240分辨率,支持电阻触摸 摄像头:OV2640,200W像素 扬声器&#…

SQL 语句中 left join 后用 on 还是 where,区别大了!

目录 情况 小结 举例 情况 前天写SQL时本想通过 A left B join on and 后面的条件来使查出的两条记录变成一条,奈何发现还是有两条。 后来发现 join on and 不会过滤结果记录条数,只会根据and后的条件是否显示 B表的记录,A表的记录一定会显…

RT1052的定时器

文章目录 1 通用定时器1.1 定时器框图1.2 实现周期性中断 2 相关寄存器3 定时器配置3.1 时钟使能3.2 初始化GPT1定时器3.2.1 base3.2.2 initConfig3.2.2.1 clockSorce3.2.2.2 divider3.2.2.3 enablexxxxx 3.3 设置 GPT1 比较值3.3.1 base3.3.2 channel3.3.3 value 3.4 设置 GPT…

数据库的分库分表

#!/bin/bash ######################### #File name:db_fen.sh #Version:v1.0 #Email:admintest.com #Created time:2023-07-29 09:18:52 #Description: ########################## MySQL连接信息 db_user"root" db_password"RedHat123" db_cmd"-u${…

LNMP及论坛搭建(第一个访问,单节点)

LNMP:目前成熟的一个企业网站的应用模式之一,指的是一套协同工作的系统和相关软件 能够提供静态页面服务,也可以提供动态web服务,LNMP是缩写 L:指的是Linux操作系统。 N:指的是nginx,nginx提…

操作系统 - 小记 230803

文章目录 计算机的硬件组成程序的存储和执行程序语言的设计和进化存储设备的层次结构操作系统 https://www.bilibili.com/video/BV1Q5411w7z5?p2 计算机的硬件组成 CPU CU,控制单元ALU,算数逻辑单元寄存器 IO Bridge 处理器和外部交互的桥梁Main Memory…

Java并发编程之顺序一致性

如果程序是正确同步的,程序的执行将具有顺序一致性(Sequentially Consistent)——即程序的执行结果与该程序在顺序一致性内存模型中的执行结果相同。 同步,即排队。 同一时刻,只能有一个线程和内存交互!&a…

windows环境下安装elasticsearch、kibana

通过本文可以快速在windows系统上安装elasticsearch、kibana环境。 当你用Integer类型的时候,要非常小心,因为100等于100、但是200不等于200,当然,如果你会一点小花招,也可以让100不等于100、让200等于200。(运算符比较…

windows物理机 上安装centos ,ubuntu,等多个操作系统的要点

一、摘要 一般情况下,我们的笔记本或工作电脑都默认安装windows 分几个区,当下是win7 win8 win 10 win11 等,突然我们有需求需要安装个centos ,后面我们应当怎么做,要点是什么?一定要根据网上的贴子一步步来…

状态模式(State)

状态模式是一种行为设计模式,允许一个对象在其内部状态改变时改变它的行为,使其看起来修改了自身所属的类。其别名为状态对象(Objects for States)。 State is a behavior design pattern that allows an object to change its behavior when its inter…

【LeetCode】地下城游戏(动态规划)

地下城游戏 题目描述算法分析编程代码 链接: 地下城游戏 题目描述 算法分析 编程代码 class Solution { public:int calculateMinimumHP(vector<vector<int>>& dungeon) {int m dungeon.size();int n dungeon[0].size();vector<vector<int>> d…

异或运算详解

异或运算详解 定义特性用途总结 定义 参与运算的两个数据,按二进制位进行 ^ 运算,如果两个相对应为值相同结果为0,否则为1 1 ^ 0 1 0 ^ 1 1 0 ^ 0 0 1 ^ 1 0特性 异或^运算只能用于数值(整数) x ^ 0 x x ^ x 0用途 两个值交换,而不用使用临时变量 a a ^ b; b b ^…

《向量数据库》——怎么安装向量检索库Faiss?

装 Faiss 以下教程将展示如何在 Linux 系统上安装 Faiss: 1. 安装 Conda。 在安装 Faiss 之前,先在系统上安装 Conda。Conda 是一个开源软件包和环境管理系统,可在 Windows、macOS 和 Linux 操作系统上运行。根据以下步骤在 Linux 系统上安装 Conda。 2. 从官网…

AI Chat 设计模式:11. 状态模式

本文是该系列的第十一篇&#xff0c;采用问答式的方式展开&#xff0c;问题由我提出&#xff0c;答案由 Chat AI 作出&#xff0c;灰色背景的文字则主要是我的一些思考和补充。 问题列表 Q.1 你知道状态模式吗A.1Q.2 它与有限状态机有什么联系吗&#xff1f;A.2Q.3 知道了&…

安防监控国标GB28181平台EasyGBS可以获取录像却无法播放是什么原因?

安防监控EasyGBS国标视频云服务平台基于国标GB/T28181协议&#xff0c;可实现的视频功能包括&#xff1a;视频直播、录像、语音对讲、云存储、告警、级联等&#xff0c;可分发的视频流包括RTSP、RTMP、FLV、HLS等格式。 近期有用户反馈&#xff0c;安防监控EasyGBS出现了设备录…

linux网卡命名规则

Consistent Network Device Naming Linux provides methods for consistent(一致) and predictable(可预测) network device naming for network interfaces. These features change the name of network interfaces on a system in order to make locating and different…

CentOS系统启动过程

CentOS系统启动流程图 &#xff08;1&#xff09; 加载 BIOS 计算机电源加电质检&#xff0c;首先加载基本输入输出系统&#xff08;Basic Input Output System&#xff0c;BIOS&#xff09;&#xff0c;BIOS 中包含硬件 CPU、内存、硬盘等相关信息&#xff0c;包含设备启动顺序…

kubernetes之Ingress

一、背景 Ingress是k8s中实现7层负载的实现方式&#xff0c;是公开集群外部流量到集群内服务的HTTP和HTTPS路由 二、Ingress基础 通常Ingress实现由Ingress 控制器和Ingress组成&#xff0c;Ingress控制器负责具体实现反向代理及负载均衡&#xff0c;Ingress负责定义匹配规则和…

线程池相关理论

什么是线程池 线程池是一种利用池化技术思想来实现的线程管理技术&#xff0c;主要是为了复用线程、便利地管理线程和任务、并将线程的创建和任务的执行解耦开来。我们可以创建线程池来复用已经创建的线程来降低频繁创建和销毁线程所带来的资源消耗。在JAVA中主要是使用Thread…

谐波失真(HD)

某一固定信号经过电子元器件后会出现谐波信号&#xff0c;在现实世界中&#xff0c;渴望都是线性的系统。比如&#xff1a;某个信号经过运算放大器放大&#xff0c;理想情况下不应该出现其他谐波信号&#xff0c;但实际上有谐波信号出现&#xff0c;HD(harmonic distortion)在一…