load、unload和pagehide、pageshow

news2024/9/22 11:29:59

一、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.coloradmin.cn/o/834700.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

第3集丨Vue 江湖 —— Vue中的事件

目录 一、Vue中事件使用二、事件修饰符2.1 prevent2.2 stop2.3 once2.4 capture2.5 self2.6 passive2.7 修饰符连续写2.8 整合案例 三、键盘事件3.1 Vue 中常用的按键别名3.2 key值绑定3.3 系统修饰符键3.4 keyCode绑定3.5 自定义别名3.6 组合键3.7 案例整合 一、Vue中事件使用…

k8s概念-pv和pvc

回到目录 kubernetes存储卷的分类太丰富了,每种类型都要写相应的接口与参数才行,这就让维护与管理难度加大。 persistenvolume(PV) 是配置好的一段存储(可以是任意类型的存储卷) 也就是说将网络存储共享出来,配置定义成PV。 PersistentVolumeClaim(PVC)是用户pod使…

实例030 窗口颜色的渐变

实例说明 在程序设计时,可以通过设置窗体的BackColor属性来改变窗口的背景颜色。但是这个属性改变后整个窗体的客户区都会变成这种颜色,并且非常单调。如果窗体的客户区可以向标题栏一样能够体现颜色的渐变效果,那么窗体风格将会另有一番风味…

【前端实习生备战秋招】—HTML 和 CSS面试题总结(二)

【前端实习生备战秋招】—HTML 和 CSS面试题总结&#xff08;二&#xff09; 1.有哪些方式可以对一个 DOM 设置它的 CSS 样式&#xff1f; 外部样式表&#xff0c;引入一个外部 css 文件内部样式表&#xff0c;将 css 代码放在 <head> 标签内部内联样式&#xff0c;将 c…

2023年电赛E题报告模板(K210版)--可直接使用

任务 图1 任务内容 要求 图2 基本要求内容 图3 发挥部分内容 说明 图4 说明内容 评分标准 图5 评分内容 正文 &#xff08;部分&#xff09; 摘要 本文使用K210芯片设计了一个运动目标控制与自动追踪系统。系统包括使用深度学习进行识别激光位置&#xff0c;其中红色激…

Vue2:基础入门

Vue2&#xff1a;基础入门1 Date: April 10, 2023 Sum: vue简介、vue的基本使用、vue的指令、修饰符、过滤器&#xff08;废&#xff09;、小黑的书架、记事本 Tags: * 目标&#xff1a; 能够知道 vue 的基本使用步骤 掌握插值表达式和 v-bind 指令的用法 能够掌握如何使用…

以太网接口指示灯状态分析和电路设计

一、RJ45以太网连接器介绍 以带网络隔离变压器的RJ45接头为例&#xff0c;如HR911105A&#xff0c;其技术参数如下 原理框图 指示灯部分 二、PHY芯片 phy芯片以DP83848CVV/NOPB为例&#xff0c;查看数据手册。引脚26&#xff0c;引脚27和引脚28和LED灯相关&#xff0c;如下截…

DataGrip实时模板的配置

DataGrip实时模板的配置 File→Setting→Editor→Live Templates→点击“”→Live Template 即可新写入一条模板语句 写入新模板 缩写&#xff1a;seld select $END$ from dual; 注意:一开始都是默认无应用的&#xff0c;需要手动配置应用于所有SQL 点击difine&#xff08;…

从零开始 Spring Cloud 9:RabbitMQ

从零开始 Spring Cloud 9&#xff1a;RabbitMQ 图源&#xff1a;laiketui.com RabbitMQ 是一款消息队列中间件&#xff0c;可以用于异步通信。 基础 安装 通过 Docker 安装镜像&#xff1a; docker pull rabbitmq:3-management运行 docker run \-e RABBITMQ_DEFAULT_USER…

微信小程序:点击按钮实现数据加载(带模糊查询)

效果图 代码 wxml: <!-- 搜索框--> <form action"" bindsubmit"search_all_productiond"><view class"search_position"><view class"search"><view class"search_left">工单号:</view…

力扣 416. 分割等和子集

题目来源&#xff1a;https://leetcode.cn/problems/partition-equal-subset-sum/description/ C题解&#xff08;思路来源代码随想录&#xff09; &#xff1a; 背包问题有多种背包方式&#xff0c;常见的有&#xff1a;01背包、完全背包、多重背包、分组背包和混合背包等等。…

实验笔记之——Android项目的适配

android有一个很烦人的点就是版本之间差距较大&#xff0c;且不兼容&#xff0c;导致不同版本之间代码兼容很容易出问题&#xff0c;一个常见的例子就是几年前自己开发的app&#xff0c;几年后再用竟然配置不了。。。为此&#xff0c;写下本博客记录一下配置旧项目的过程。 …

IDA+Frida分析CTF样本和Frid源码和objection模块

文章目录 一些资料IDA调试命令IDA调试安卓的10个技巧objection基本使用 Wallbreaker1frida源码阅读之frida-java 第一个实例EasyJNI第二个实例objection资料 art_trace2.pyart_trace2.js IDAFrida分析CTF样本和Frid源码和objection模块 一些资料 IDA调试命令 adb devices adb…

Redis 如何解决缓存雪崩、缓存击穿、缓存穿透难题

前言 Redis 作为一门热门的缓存技术&#xff0c;引入了缓存层&#xff0c;就会有缓存异常的三个问题&#xff0c;分别是缓存击穿、缓存穿透、缓存雪崩。我们用本篇文章来讲解下如何解决&#xff01; 缓存击穿 缓存击穿: 指的是缓存中的某个热点数据过期了&#xff0c;但是此…

我们一起聊聊Docker And Dockerfile

目录 一、前言 二、了解Dockerfile 三、Dockerfile 指令 四、多阶段构建 五、Dockerfile 高级用法 六、小结 一、前言 对于开发人员来说&#xff0c;会Docker而不知道Dockerfile等于不会Docker&#xff0c;上一篇文章带大家学习了Docker的基本使用方法&#xff1a;《一文…

Mybatis where 1=1 会导致索引失效?

背景 这几天在网上百度看到有说法 where 11 会导致索引失效 实践 1.直接where 条件 这是我自己本地建立的表&#xff0c;索引也看到了&#xff0c;是这个index_shopname 2.where 11 and 条件 这个是加了11的&#xff0c;可以看到也是走了索引的 3.直接select * from whe…

测试平台——用户模块开发

这里写目录标题 一、创建子应用二、用户注册设计1、用户注册模型类设计a、Django认证系统提供了用户模型类User&#xff0c;为什么还要定义User模型类?b、AbstractUserc、自定义用户模型类的字段有d、User模型类编写好了就可以了吗? 2、用户注册序列化器类设计a、注意b、单字…

基于分级安全的OpenHarmony架构设计

本文转载自 OpenHarmony TSC 官方微信公众号《峰会回顾第1期 | 基于分级安全的OpenHarmony架构设计》 演讲嘉宾 | 付天福 回顾整理 | 廖 涛 排版校对 | 李萍萍 嘉宾简介 付天福&#xff0c;OpenHarmony技术指导委员会安全及机密计算TSG负责人&#xff0c;华为公司科学家委员会…

机器人“瓦力”近在咫尺?谷歌最新的RT-2 AI模型简介

“首创”的机器人 AI 模型能够识别垃圾并执行复杂的动作。 上周五&#xff0c;谷歌 DeepMind 宣布了机器人变形器 2&#xff08;RT-2&#xff09;&#xff0c;这是一种“首次推出”的视觉-语言-行动&#xff08;VLA&#xff09;模型&#xff0c;利用从互联网上抓取的数据&…

理解 CSS 中的 Containing Block

前言 在开始本文之前先来看一个例子&#xff0c;下面一段简单的 html 代码&#xff0c;布局很简单&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"w…