0.加载完页面，解析完所有标签（不包括执行CSS和JS），并如规范中所说的设置 interactive 和执行每个静态的script标签中的JS，然后触发。

1.没有js，有css，有img，DOMContentLoaded事件不直接等待CSS文件、图片的加载完成

2.有js，没有css，有img，DOMContentLoaded事件需要等待JS执行完才触发

3.有js，而且js前面有css，没有img，DOMContentLoaded事件需要等待css加载完，JS执行完才触发

总结：DOMContentLoaded依赖js执行完，js执行依赖css加载完。

tips：img展现，依赖css加载完，不依赖js执行完。

参考：http://www.alloyteam.com/2014/03/effect-js-css-and-img-event-of-domcontentloaded/

关于dom ready事件的更多相关文章

  1. Web UI - Javascript之DOM Ready

    最近终于稍微适应了工作环境,终于可以让自己缓口气.于是决定要写点东西,算是督促.记录和提升自己的学习.代码的世界,你不轮它,以后就会被它轮.这个系列尽量保持在一周或两周更一篇,目标是在创造内容的时候更 ...

  2. DOM Ready 详解

    DOM Ready 概述 熟悉jQuery的人, 都知道DomReady事件. window.onload事件是在页面所有的资源都加载完毕后触发的. 如果页面上有大图片等资源响应缓慢, 会导致wind ...

  3. 【jQuery源码】DOM Ready

    一直以来,各种JS最佳实践都会告诉我们,将JS放在HTML的最后,即</body>之前,理由就是:JS会阻塞下载,而且,在JS中很有可能有对DOM的操作,放在HTML的最后,可以尽可能的保 ...

  4. [转]jQuery DOM Ready

    一直以来,各种JS最佳实践都会告诉我们,将JS放在HTML的最后,即</body>之前,理由就是:JS会阻塞下载,而且,在JS中很有可能有对DOM的操作,放在HTML的最后,可以尽可能的保 ...

  5. ready 事件 DOM（文档对象模型） 已经加载....

    定义和用法 当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件. 由于该事件在文档就绪后发生,因此把所有其他的 jQuery 事件和函数置于该事件中是非 ...

  6. jquery的ready事件的实现机制浅析

    页面初始化中,用的较多的就是$(document).ready(function(){//代码}); 或 $(window).load(function(){//代码}); 他们的区别就是,ready ...

  7. jQuery源码dom ready分析

    一.前言 在平时开发web项目时,我们使用jquery框架时,可能经常这样来使用$(document).ready(fn),$(function(){}),这样使用的原因是在浏览器把DOM树渲染好之前 ...

  8. jquery dom ready, jqery2.1.1实现-源码分析

    本文链接http://www.cnblogs.com/Bond/p/4178311.html jquery document  ready的实现其很很简,虽说简单,其很很多人还是没去关注过它的实现.我 ...

  9. 5事件DOM零级事件跟DOM二级事件

    事件的行为传播,行为本身跟事件绑定没有关系:1.全新认识事件(某一个具体的行为)->行为本身:浏览器天生自带的一些行为操作->click,mouseover(mouseenter),mou ...

随机推荐

  1. 获取url中的参数\+发送ajax请求根路径|+获取复选框的值

    //获取url中的参数function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=( ...

  2. JBuilder链接sql server数据库

    加载你的jdbc的驱动             一.将jdbc驱动解压到一个指定的目录,例如:c:\sql_server_jdbc,                其中包含三个驱动文件:msbase. ...

  3. 表数据文件DBF的读取和写入操作

    import sys import csv import struct import datetime import decimal import itertools from cStringIO i ...

  4. diff 文件比较

    测试数据: [xiluhua@vm-xiluhua][~]$ cat msn.txt aaa bbb bbb ccc ccc ddd bbb eee aaa ccc bbb sss [xiluhua@ ...

  5. Hadoop Balance

    一.hadoop balance工具的用法: 启动balance: bin/start-balancer.sh -threshold 5 停止balance: bin/stop-balancer.sh ...

  6. WPF:获取控件内的子项

    一.界面内容(部分:仅供参考) <Window> <Window.Resources> <!--工具数据源--> <XmlDataProvider x:Key ...

  7. python正则表达式之元字符介绍

    python中元字符及其含义如下: 元字符 含义 . 匹配除换行符以外的任意一个字符 ^ 匹配行首 $ 匹配行尾 ? 重复匹配0次或1次 * 重复匹配0次或更多次 + 重复匹配1次或更多次 {n,} ...

  8. LeetCode----67. Add Binary(java)

    package addBinary67;/* Given two binary strings, return their sum (also a binary string).For example ...

  9. Excel 函数

    Excel 函数: 一.定义: Excel 函数即是预先定义,执行计算.分析等处理数据任务的特殊公式. 二.结构: 1.单一结构 =函数名(参数1,参数2,参数3.....) 示例:=sum(A3:A ...

  10. JSTL，自定义一个标签的功能案例

    1.自定义一个带有两个属性的标签<max>,用于计算并输出两个数的最大值: 2.自定义一个带有一个属性的标签<lxn:readFile  src=“”>,用于输出指定文件的内容 ...