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

浏览器渲染页面DOM文档加载的步骤：
1.解析HTML结构。

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

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

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

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

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

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

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

DomContentLoaded 和 load 区别

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

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

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

  2. js中DOMContentLoaded和load的区别

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

  3. DOMContentLoaded与load的区别

    声明:此文章为转载(点击查看原文),如有侵权24小时内删除.联系QQ:1522025433. (1)在chrome浏览器的开发过程中,我们会看到network面板中有这两个数值,分别对应网 络请求上的 ...

  4. DOMContentLoaded和load的区别

    一.概念 DOMContentLoaded 当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表.图像和子框架的完成加载. load loa ...

  5. 事件DOMContentLoaded和load的区别

    1.当 onload 事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了. 2.当 DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,f ...

  6. DOMContentLoaded 和 Load 事件 区别（待补充）

    javascript会阻塞dom的解析.当解析过程中遇到<script>标签的时候,便会停止解析过程,转而去处理脚本,如果脚本是内联的,浏览器会先去执行这段内联的脚本,如果是外链的,那么先 ...

  7. ready与load的区别

    JQuery里有ready和load事件 $(document).ready(function() { // ...代码... }) //document ready 简写 $(function() ...

  8. js中== 和===中的区别

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  9. js onkeypress与onkeydown 事件区别详细说明

    keypress只适用于有字符输入的按键 而keyup/keydown包含了Ctrl, Shift之类的情况 Firefox在处理onKeyDown/onKeyPress事件时存在漏洞,恶意网页可能利 ...

随机推荐

  1. AAPTEXECPTION

    Error:java.util.concurrent.ExecutionException: com.android.builder.\files-.aar\a234c5f0534a8da0e4db0 ...

  2. 小程序：pages/index/index/出现脚本错误或未正确调用Page()

    第一次尝试玩小程序,配置好以后报错.pages/index/index/出现脚本错误或未正确调用Page() 才发现解决的方式是:新建的文件默认是没有page()的,所以你需要在.js文件中加上Pag ...

  3. 初识Swift中的值和引用，循坏引用、代理的注意点

    1.0 在Swift中分有值类型和引用类型 Int .String . 结构体和枚举都属于值类型, 将值类型传递给方法是,将在内存中创建其副本,并传递这个副本:这样我们就可以随心所欲修改它,而不用担心 ...

  4. LinQ to sql简介及增删改查

    Linq to sql 类 LinQ它就是一个集成化的数据库访问类,它会自动生成许多原本需要我们自己创建的东西: 它和ADO.NET是一样的东西,都是为了访问数据库而出现的,EF框架 一.创建LinQ ...

  5. java.lang.UnsupportedClassVersionError 异常

    运行的JDK版本和开发环境的版本不一致导致 解决办法:更换运行环境的JDK版本,使其与运行环境一致.

  6. 重新装kafka

    Linux搭建kafka   一.安装Java 1.查看linux 的系统版本 root@aliyun:~# uname --m x86_64 2.安装java mkdir -p /usr/local ...

  7. 2018面向对象程序设计（Java）第7周学习指导及要求

    第7周学习指导及要求(2018.10.11-2018.10.14)   学习目标 深入理解OO程序设计的特征:继承.多态: 熟练掌握Java语言中基于类.继承技术构造程序的语法知识: 利用继承定义类设 ...

  8. mongo副本集设置主库权重，永远为主

    mongo副本集设置主库权重,即使主库宕机了再重启也还是主库. cfg = rs.conf()     ------->(查看序列)cfg.members[0].priority = 1 (设置 ...

  9. Restrict & Cascade

    [Restrict & Cascade] 参考:https://my.oschina.net/cart/blog/277624

  10. Jenkins+svn+ant+tomcat持续集成

    转载自 http://www.cnblogs.com/liuhaixia/p/7267473.html Jenkins是基于Java开发的一种持续集成工具,用于监控秩序重复的工作.通过Jenkins+ ...