DOMContentLoaded与load的区别

栏目: jQuery · 发布时间: 5年前

内容简介:MDN: 当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架的完成加载页面上所有的资源(图片,音频,视频等)被加载以后才会触发load事件。所以 load 所需要的时间必然大于等于 DOMContentLoaded 所需要的时间。

DOMContentLoaded与load的区别

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?";
}

DOMContentLoaded与load的区别

相关知识点:document​.ready​State


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

无处不在的算法

无处不在的算法

[德]贝特霍尔德·弗金、赫尔穆特·阿尔特 / 机械工业出版社 / 2018-1-1

本书以简单易懂的写作风格,通过解决现实世界常见的问题来介绍各种算法技术,揭示了算法的设计与分析思想。全书共有41章,分为四大部分,图文并茂,把各种算法的核心思想讲得浅显易懂。本书可作为高等院校算法相关课程的本科生教材,也可作为研究人员、专业技术人员的常备参考书。一起来看看 《无处不在的算法》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

MD5 加密
MD5 加密

MD5 加密工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具