页面加载过程中触发的事件_控制页面加载时触发事件的属性是什么-程序员宅基地

技术标签: HTML  

readyState属性描述了文档的加载状态,在整个加载过程中document.readyState会不断变化,每次变化都会触发readystatechange事件。

readyState的值变化:

  1. loading(加载)文档被加载时。
  2. loaded(加载完毕)文档数据加载完毕。
  3. interactive(交互)文档结束加载并且被解析,可以操作对象,但部分资源还没有加载完成;如图像,样式表和框架之类的子资源仍在加载
  4. complete(完成)全部资源已经加载完成。状态表示window的load事件即将被触发。

执行顺序:

  1. 页面加载开始,首先肯定是先发出加载资源的请求,加载未完成之前,不触发任何事件。

  2. document加载结束并解析,此时css等其他资源未加载完成。
    此时readyState为'interactive',表明document已经load并解析完成,触发readystatechange,然后触发DOMComtentLoaded(在大多数浏览器上的表现如此)。此时,加载完成且带有defer标记的脚本,会按顺序开始执行。

  3. css、img等子资源加载完成之后,此时触发window.load事件。

  4. 点击关闭标签或者刷新时,会依次触发beforeunload、unload事件。

document.onreadystatechange = function(){
    
   console.log(document.readyState);//描述文档被加载的状态
}
window.addEventListener('load',function(){
    
   console.log('window 所有资源加载完成');
})
document.addEventListener('DOMContentLoaded',function(){
    
   console.log('当初始html文档完全加载');
})
interactive
当初始html文档完全加载
complete
window 所有资源加载完成

交互阶段可能会早于也可能会晚于完成阶段出现;如当加载的外部资源较多时,交互阶段很可能会早于完成阶段。所以判断事件执行条件时要可以这样判断来取得先机。

document.onreadystatechange = function(){
    
    if(document.readyState=='interactive'||document.readyState=='complete')
    ..........
}

你要去做一个大人,不要回头,不要难过。

“我真的很喜欢你,像风走了八千里,不问归期。”

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44296929/article/details/103799837

智能推荐

C++基础入门(超详细)_c++入门-程序员宅基地

文章浏览阅读1w次,点赞13次,收藏121次。c++_c++入门

jstl标签<c:url>查询分页时拼接参数的用法_jstl 标签输出内容拼接-程序员宅基地

文章浏览阅读1.5k次。先上代码:${ pageContext.request.contextPath }号码段管理 号码段管理 号码段管理 区域号

浅解比SQL更好用的SPL(二)-程序员宅基地

文章浏览阅读118次。从 SQL 到SPL基本查询语法迁移之多表操作上一篇我们针对单表的情形了解了如何把数据计算从 SQL 查询迁移到集算器,或者更准确地说,迁移到集算器所使用的SPL集算语言。这个迁移过程,既有相同的概念,也有不同的思路。接下来,我们一起针对多表的情况看一下集算器和SPL语言是如何发挥更大的..._sql常用比if更好用

国科大高级人工智能10-强化学习(多臂赌博机、贝尔曼)_国科大 强化学习-程序员宅基地

文章浏览阅读1.5k次。文章目录多臂赌博机Multi-armed bandit(无状态)马尔科夫决策过程MDP(markov decision process1.动态规划蒙特卡罗方法——不知道环境完整模型情况下2.1 on-policy蒙特卡罗2.2 off-policy蒙特卡罗时序差分方法强化学习:Reinforcement learning目标:学习从环境状态到行为的映射,智能体选择能够获得环境最大奖赏的行为..._国科大 强化学习

如何用 Visual studio 2003/2005 调试 ASP 应用程序、Javascript 代码(转)_visual studio 2003 asp 远程调试-程序员宅基地

文章浏览阅读1k次。如何用 Visual studio 2003/2005 调试 ASP 应用程序、Javascript 代码 在vs2005中调试ASP网站的错误信息:无法提供此类型的页。说明: 由于已明确禁止所请求的页类型,无法对该类型的页提供服务。扩展名“.asp”可能不正确。 请检查以下的 URL 并确保其拼写正确。 怎么解决这个问题呢?请看下文。 ASP.NET 已经很_visual studio 2003 asp 远程调试

MMO即时战斗:地图角色同步管理和防作弊实现_mmo城镇同步-程序员宅基地

文章浏览阅读1.3w次,点赞2次,收藏29次。一、前言 无论是端游、页游、手游如果是采用了MMO即时战斗游戏模式,基本都会遇到同屏多角色实时移动、释放技能、战斗等场景,于是自然也需要实现如何管理同屏内各种角色的信息同步:例如角色的位置、以及角色身上的装备、时装、buffer等状态的实时切换。同步在网络游戏中是非常重要的,它保证了每个玩家在屏幕上看到的东西大体是一样的,解决同步问题的最简单的方法就是把每个玩家的_mmo城镇同步

随便推点

vulfocus——maccms远程命令执行(CVE-2017-17733)_vulfocus/dedecms-cve-2017-17731-程序员宅基地

文章浏览阅读1.2k次。Maccms 8.x版本中存在安全漏洞。远程攻击者可借助index.php?m=vod-search请求中的‘wd’参数利用该漏洞执行命令。2.借助index.php?m=vod-search请求中的‘wd’参数利用该漏洞执行命令。利用浏览器浏览器发送POST数据包或直接使用Python编写的脚本进行发送POST数据包。3.进行攻击,该payload是直接生成一个c.php一句话木马文件,连接密码为c。Maccms是一套跨平台的基于PHP和MySQL快速建站系统。_vulfocus/dedecms-cve-2017-17731

c++面向对象课程笔记_包含警戒存在于-程序员宅基地

文章浏览阅读86次。计算机软件专业面向对象oop课程笔记_包含警戒存在于

oracle行锁 select for update_oracle select 加锁检测 update-程序员宅基地

文章浏览阅读845次。oracle行锁 select for update_oracle select 加锁检测 update

【异常】解决@Autowired注入依赖失败的问题,required a bean of type that could not be found. Autowired(required=true)_@autowired(required = true)-程序员宅基地

文章浏览阅读817次。结合报错信息及代码,报错处的代码为ActiveIncrUserTimer使用了注解@Autowired进行依赖注入,但是没有找到可以被用来注入的实例。即Spring Boot获取ActiveIncrUserService 的实例失败。原来是我不小心把这个代码ActiveIncrUserServiceImp给误删了。_@autowired(required = true)

优化USB UVC ISO传输速度_全志uvc提升iso传输速度-程序员宅基地

文章浏览阅读2k次。USB3.0单路uvc iso传输速率只有92MB/s, 1080p yuv 23.4fps,我们需要提高UVC传输速率(YUV帧率)_全志uvc提升iso传输速度

告别2014,转战2015-程序员宅基地

文章浏览阅读59次。-----------------------------------------------------------------------------------------欲穷千里目,更上一层楼。 2014年曾是一个开始,在此期间,无限的恐惧与励志。此部落格也在这一年的一月份开通,这里也是一个互联网世界。 记录2014流水:1月-4月,日子如压缩般被度过,Web方面完..._proxmox solidworks cad