作者:神話南帝冫 | 来源:互联网 | 2023-06-05 09:19
DOMContentLoaded与load的区分DOM文档的加载步骤剖析HTML构造加载外部剧本和样式表文件剖析并实行剧本构建HTMLDOM模子DOMContentLoaded加载
DOMContentLoaded与load的区分
DOM 文档的加载步骤
- 剖析HTML构造
- 加载外部剧本和样式表文件
- 剖析并实行剧本
- 构建 HTML DOM模子 // DOMContentLoaded
- 加载外部资本文件(image等)
- 页面衬着完成 // load
DOMContentLoaded (对应 jQuery 中的 $(document).ready())
MDN: 当初始的 HTML 文档被完整加载和剖析完成今后,DOMContentLoaded 事宜被触发,而无需守候样式表、图象和子框架的完成加载
load (对应 jQuery 中的 $(document).load())
页面上一切的资本(图片,音频,视频等)被加载今后才会触发load事宜。所以 load 所须要的时候必定大于即是 DOMContentLoaded 所须要的时候。
HTML 页面的生命周期
主要有三个主要的事宜
- DOMContentLoaded, DOM已构建好,能够对DOM节点举行操纵
document.addEventListener('DOMContentLoaded', cb)
- load,一切资本加载终了,能够对资本举行一系列操纵,比方猎取图片宽高级~
window.Onload= function() {}
- beforeunload/unload(基础不会用到),当浏览器窗口封闭或许革新时,会触发beforeunload事宜。当前页面不会直接封闭,能够点击肯定按钮封闭或革新,也能够作废封闭或革新。我们能够搜检用户是不是保留了修正,并提醒他是不是肯定脱离当前页面
window.Onbeforeunload= function() {
return "There are unsaved changes. Leave now?";
}
相干知识点:document.readyState
原文链接: https://arronf2e.github.io/post/js-xue-xi-domcontentloaded-yu-load-de-qu-bie