如题;DOMContentLoaded和load都是页面加载的时候触发的事件。区别在于触发的时机不一样。

浏览器渲染页面DOM文档加载的步骤:

1.解析HTML结构。

2.加载外部脚本和css文件。

3.解析并执行脚本代码。

4.DOM树构建完成。(此时会触发DOMContentLoaded事件)

5.加载外部图片等文件。

6.页面加载完毕。(此时会触发load事件)

从以上DOM文档加载步骤上可以看出;当浏览器把DOM树构建完成后就开始触发了DOMContentLoaded事件,而load事件则要等包括图片这些加载完毕才会触发。

我们监听事件的时候把优先级高的可以先监听DOMContentLoaded再监听load。

js中DOMContentLoaded和load的区别的更多相关文章

  1. 【转载】DOMContentLoaded与load的区别

    DOMContentLoaded与load的区别   (1)在chrome浏览器的开发过程中,我们会看到network面板中有这两个数值,分别对应网 络请求上的标志线,这两个时间数值分别代表什么? ( ...

  2. 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie,Session,Application的用法与区别? c#反射 抽象工厂

    浅谈JS中的!=.== .!==.===的用法和区别   var num = 1;     var str = '1';     var test = 1;     test == num  //tr ...

  3. JS中isPrototypeOf 和hasOwnProperty 的区别 ------- js使用in和hasOwnProperty获取对象属性的区别

    JS中isPrototypeOf 和hasOwnProperty 的区别 1.isPrototypeOf isPrototypeOf是用来判断指定对象object1是否存在于另一个对象object2的 ...

  4. (网页)Angular.js 中 copy 赋值与 = 赋值 区别

    转自st.gg Angular.js 中 copy 赋值与 = 赋值 区别 为什么用 $scope.user = $scope.master; $scope.master 会跟着 $scope.use ...

  5. js中的substr和substring区别

    js中的substr和substring区别 Substring: 该方法可以有一个参数也可以有两个参数. (1)  一个参数: 示例: var str=“Olive”: str.substring( ...

  6. JS 中的require 和 import 区别整理

    ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使 ...

  7. js DomContentLoaded 和 load 的区别

    如题:DOMContentLoaded和load都是页面加载的时候触发的事件.区别在于触发的时机不一样. 浏览器渲染页面DOM文档加载的步骤: 1.解析HTML结构. 2.加载外部脚本和css文件. ...

  8. [转]html js中name和id的区别和使用分析

    js中web页面元素的调用可以有两种识别方法:id和name 自己在用的过程中总结一下id和name的使用区别. 一,使用范围 除 BASE, HEAD, HTML, META, SCRIPT, ST ...

  9. 浅谈js中null和undefined的区别

    在JS中,null和undefined是经常让人摸不着头脑的东西,尤其是在数据初始化以及处理的过程中,经常稍微不注意,就会让页面在渲染时出现报错,下面来细说下,这两者之间的区别: null 表示一个对 ...

随机推荐

  1. 使用GCD验证码倒计时

    __block int timeout = 60; dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY ...

  2. Laravel5.1学习笔记20 EloquentORM 关系

    Eloquent: Relationships Introduction Defining Relationships One To One One To Many Many To Many Has ...

  3. 巧用Eclipse Java编辑器调试

    在使用Eclipse开发Java Web应用时,使用的编辑器不但能够为开发者提供代码编写.辅助提示和实时编译等常用功能,而且还能够对Java源代码进行快捷修改.重构和语法纠错等高级操作.通过Eclip ...

  4. CSS——行业动态demo

    1.padding的运用:子div继承父div的宽,子div的padding-left值是不会撑大的. 2.背景图片的运用:不平铺.定位 3.ul本身就是一个盒子,它的高度是li中的字体的默认高度撑起 ...

  5. Tomcat8 连接池

    1.所有的tomcat项目共用一个连接池配置 1.1 修改conf->context.xml文件,在Context节点下配置 <Resource name="jdbc/myDat ...

  6. img图片加载出错处理

    img图片加载出错处理   为了美观当网页图片不存在时不显示叉叉图片 当在页面显示的时候,万一图片被移动了位置或者丢失的话,将会在页面显示一个带X的图片,很是影响用户的体验.即使使用alt属性给出了” ...

  7. Java程序员怎么不断进阶 必须要掌握哪些技能

    Java程序员怎么不断进阶?必须要掌握哪些技能?成为架构师是Java程序员职业规划中的重要一环,但如何才能快速实现进阶困扰了许多Java程序员.无论是从技能深度还是实战经验,架构师都远超于普通的Jav ...

  8. CAD把一个命令当着一个函数调用,不执行(com接口VB语言)

    主要用到函数说明: MxDrawXCustomFunction::Mx_SendStringToExecuteFun 把一个命令当着一个函数调用,不执行,详细说明如下: 参数 说明 CString s ...

  9. 27.8 执行定时计算限制操作(Timer)

    private static System.Threading.Timer s_Timer; static void Main() { Console.WriteLine("checking ...

  10. Google Cloud SSH 连接配置

    设置当前用户及root用户的密码 sudo passwd xx-user # 输入新密码 sudo passwd root # 输入新密码(建议保持一样) 在本地生成私钥和公钥 cd ~/.ssh s ...