当前位置: 首页 > Web前端 > HTML5

DOMContentLoaded和load的区别

时间:2023-04-05 13:17:35 HTML5

DOMContentLoaded和load的区别DOM文档加载步骤解析HTML结构加载外部脚本和样式表文件解析执行脚本构建HTMLDOM模型//DOMContentLoaded加载外部资源文件(图片等)页面渲染已完成//loadDOMContentLoaded(对应于jQuery中的$(document).ready())MDN:DOMContentLoaded事件在初始HTML文档完全加载和解析时触发,无需等待样式表、图像和子框架加载完成(对应jQuery中的$(document).load())直到页面上的所有资源(图片、音频、视频等)加载完成后才会触发load事件。所以load所需的时间必须大于等于DOMContentLoaded所需的时间。在一个HTML页面的生命周期中有3个重要的事件DOMContentLoaded。DOM已经构建完成,可以操作DOM节点document.addEventListener('DOMContentLoaded',cb)load。所有资源加载完成后,可以对资源进行一系列的操作,比如获取图片宽高等~window.onload=function(){}beforeunload/unload(基本不用),当浏览器窗口关闭时或者刷新,会触发beforeunload事件。当前页面不会直接关闭,可以点击确定按钮关闭或刷新,也可以取消关闭或刷新。我们可以检查用户是否保存了修改,并提示他是否确定离开当前页面window.onbeforeunload=function(){return"还有未保存的修改,现在离开?";}相关知识点:文档.ready状态原文链接:https://arronf2e.github.io/post/js-xue-xi-domcontentloaded-yu-load-de-qu-bie