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后触发。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【C++】——类和对象

目录 面向过程和面向对象的初步认识类的引入类的定义类的访问限定符及封装类的作用域类的实例化this指针类的6个默认成员函数构造函数析构函数 面向过程和面向对象的初步认识 C语言是面向过程的,关注的是过程,分析求解问题的步骤,通过函数调用…

PHP使用PhpSpreadsheet实现导出Excel时带下拉框列表 (可支持三级联动)

因项目需要导出Excel表 需要支持下拉 且 还需要支持三级联动功能 目前应为PHPExcel 不在维护,固采用 PhpSpreadsheet 效果如图: 第一步:首先 使用composer 获取PhpSpreadsheet 我这里PHP 版本 7.4 命令如下: composer r…

【计算机视觉 | 目标检测 | 图像分割】arxiv 计算机视觉关于目标检测和图像分割的学术速递(7 月 31 日论文合集)

文章目录 一、检测相关(9篇)1.1 Semi-Supervised Object Detection in the Open World1.2 Multi-layer Aggregation as a key to feature-based OOD detection1.3 Non-invasive Diabetes Detection using Gabor Filter: A Comparative Analysis of Different Cameras1.4 Local …

ABAP 自定义搜索功能 demo1

ABAP 自定义搜索功能 demo1 效果: 双击选中行则为选中对应发票 实现 1定义 定义屏幕筛选参数 SELECTION-SCREEN BEGIN OF SCREEN 9020. SELECT-OPTIONS:s1_belnr FOR rbkp-belnr, s1_gjahr FOR rbkp-gjahr, s1_lifnr FOR rbkp-lifnr, s1_erfna FOR rbkp-erfnam, …

详解AMQP协议

目录 1.概述 1.1.简介 1.2.抽象模型 2.spring中的amqp 2.1.spring amqp 2.2.spring boot amqp 1.概述 1.1.简介 AMQP,Advanced Message Queuing Protocol,高级消息队列协议。 百度百科上的介绍: 一个提供统一消息服务的应用层标准高…

插入排序算法

插入排序 算法说明与代码实现&#xff1a; 以下是使用Go语言实现的插入排序算法示例代码&#xff1a; package mainimport "fmt"func insertionSort(arr []int) {n : len(arr)for i : 1; i < n; i {key : arr[i]j : i - 1for j > 0 && arr[j] > …

深入理解负载均衡原理及算法

1. 前言 在互联网早期,网络还不是很发达,上网用户少,流量相对较小,系统架构以单体架构为主。但如今在互联网发达的今天,流量请求动辄百亿、甚至上千亿,单台服务器或者实例已完全不能满足需求,这就有了集群。不论是为了实现高可用还是高性能,都需要用到多台机器来扩展服…

react中hooks分享

一. HOOKS是什么 在计算机程序设计中&#xff0c;钩子一词涵盖了一系列技术&#xff0c;这些技术用来通过拦截函数调用、消息或在软件组件之间传递的事件来改变或增加操作系统、应用程序或其他软件组件的行为。处理这些被截获的函数调用、事件或消息的代码称为“hook”。 在r…

【Python】PySpark 数据计算 ⑤ ( RDD#sortBy方法 - 排序 RDD 中的元素 )

文章目录 一、RDD#sortBy 方法1、RDD#sortBy 语法简介2、RDD#sortBy 传入的函数参数分析 二、代码示例 - RDD#sortBy 示例1、需求分析2、代码示例3、执行结果 一、RDD#sortBy 方法 1、RDD#sortBy 语法简介 RDD#sortBy 方法 用于 按照 指定的 键 对 RDD 中的元素进行排序 , 该方…

细讲一个 TCP 连接能发多少个 HTTP 请求(一)

一道经典的面试题是从 URL 在浏览器被被输入到页面展现的过程中发生了什么&#xff0c;大多数回答都是说请求响应之后 DOM 怎么被构建&#xff0c;被绘制出来。但是你有没有想过&#xff0c;收到的 HTML 如果包含几十个图片标签&#xff0c;这些图片是以什么方式、什么顺序、建…

Arthas GC日志-JVM(十八)

上篇文章说jvm的实际运行情况。 Jvm实际运行情况-JVM&#xff08;十七&#xff09; Arthas介绍 因为arthas完全是java代码写的&#xff0c;我们直接用命令启动&#xff1a; Java -jar arthas-boot.jar 启动成功后&#xff0c;选择我们项目的进程。 进入我们可用dashboard…

django实现部门表的增删改查界面

1、前期准备 部署好mysql数据库&#xff0c;创建好unicom数据库下载好bootstap的插件下载好jquery的插件下载好mysqlclient-1.4.6-cp36-cp36m-win_amd64.whl的安装包&#xff0c;根据python的版本下载 2、创建项目 在pycharm中创建项目 在pycharm的终端创建虚拟环境 py -m v…

【Docker】Docker安装Elasticsearch服务的正确方式

文章目录 1. 什么是Elasticsearch2. Docker安装Elasticsearch2.1 确定Elasticsearch的版本2.2. Docker安装Elasticsearch2.3. 给Elasticsearch安装中文分词器IKAnalyzer&#xff08;可选&#xff09; 点击跳转&#xff1a;Docker安装MySQL、Redis、RabbitMQ、Elasticsearch、Na…

Django使用uwsgi+nginx部署,admin没有样式解决办法

Django使用uwsginginx部署,admin没有样式解决办法 如果使用了虚拟环境则修改nginx.conf文件中的/static/路径为你虚拟环境的路径&#xff0c;没有使用虚拟环境则改为你python安装路径下的static server {listen 8008;server_name location; #改为自己的域名&#xff0c;没域名…

mybatisplus实现自动填充 时间

mybatisplus实现自动填充功能——自动填充时间 数据库表中的字段 创建时间 (createTime)更新时间 (updateTime) 每次 增删改查的时候&#xff0c;需要通过对Entity的字段&#xff08;createTime&#xff0c;updateTime&#xff09;进行set设置&#xff0c;但是&#xff0c;每…

途乐证券|俄罗斯宣布9月削减石油出口量

当地时间周四&#xff0c;美股兜售潮仍在持续&#xff0c;三大股指连续第二个交易日团体收跌。到收盘&#xff0c;道指跌落0.19%&#xff0c;标普500指数跌落0.25%&#xff0c;纳指跌幅为0.10%。 美国ISM7月非制造业PMI下滑 数据面上&#xff0c;美国供应办理协会ISM周四发布的…

电力巡检无人机助力迎峰度夏,保障夏季电力供应

夏季是电力需求量较高的时期&#xff0c;随着高温天气的来临&#xff0c;风扇、空调和冰箱等电器的使用量也大大增加&#xff0c;从而迎来夏季用电高峰期&#xff0c;电网用电负荷不断攀升。为了保障夏季电网供电稳定&#xff0c;供电公司会加强对电力设施设备的巡检&#xff0…

mmap函数详解

1、什么是mmap mmap是一种内存映射文件的方法&#xff0c;即将一个文件或者其它对象映射到进程的地址空间&#xff0c;实现文件磁盘地址和进程虚拟地址空间中一段虚拟地址的一一对映关系。 实现这样的映射关系后&#xff0c;进程就可以采用指针的方式读写操作这一段内存&#x…

Android入门教程||Android 架构||Android 应用程序组件

Android 架构 Android 操作系统是一个软件组件的栈&#xff0c;在架构图中它大致可以分为五个部分和四个主要层。 Linux内核 在所有层的最底下是 Linux - 包括大约115个补丁的 Linux 3.6。它提供了基本的系统功能&#xff0c;比如进程管理&#xff0c;内存管理&#xff0c;设…

Android 面试题 应用程序结构 十一

&#x1f525; Framework主要包含以下模块 &#x1f525; ActivityManagerService 这是一个Activity的管理者&#xff0c;负责管理所有Activity的生命周期。WindowManagerService 它是手机屏幕的的管理者&#xff0c;管理着屏幕的详细情况&#xff0c;所有对屏幕的操作最终都…