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. php单链表实现的代码

    <?php/*** 单链表*/ class Demo{private $id;public $name;public $next;public function __construct ($id ...

  2. PHP过滤评论关键词

    <?php /** * PHP中屏蔽过滤指定关键字实现方法总结 * http://www.111cn.net/phper/phpanqn/46225.htm * * 思路: * 一.把关键字专门 ...

  3. mysql高可用之PXC（Percona XtraDB Cluster）

    简介 Percona XtraDB Cluster是MySQL高可用性和可扩展性的解决方案,Percona XtraDB Cluster提供的特性如下: 1).同步复制,事务要么在所有节点提交或不提交 ...

  4. java 面试每日一题2

    题目:输入一行字符,分别统计出其中英文字母.空格.数字和其它字符的个数. 注:如果想单独输出中文的个数和中文符号的个数,只需把isChinese()中的if语句修改 知识补充: java不像C中拥有s ...

  5. python中列表和字典常用方法和函数

    Python列表函数&方法 Python包含以下函数: 序号 函数 1 cmp(list1, list2)比较两个列表的元素 2 len(list)列表元素个数 3 max(list)返回列表 ...

  6. Linux下启动Oracle

    切换到oracle用户 su - oracle   启动监听 lsnrctl start   确认是不是想要启动的oracle实例 echo $ORACLE_SID   如果不是,切换SID  ora ...

  7. River Hopscotch(二分POJ3258)

    River Hopscotch Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 9263 Accepted: 3994 Descr ...

  8. [theWord] 一种英文字典的基类设计

    theWord --- 一种英文字典的基类设计 使用场景 想写一个应用,来记录自己背单词时候,对每个单词的记忆状况之类的东西.至于为什么做这个,试过了一些背单词软件,并不觉得好用,自己做一个吧. 那么 ...

  9. Android中scrollview嵌套HorizontalScrollView卡顿现象解决

    开发中经验会遇到滑动里面嵌入滑动的问题,但是这种情况下触摸事件就会发生冲突.导致滑动非常卡,甚至出现程序停止响应.这种情况下我们一般需要重写view.下面给出重新scrollview的方法 publi ...

  10. Oracle-学习笔记（==》集合函数与分组四）

    -- 聚集函数 配合分组语句 group by-- 显示最高分SELECT MAX(sscore) FROM db.`student`;-- 显示最高分学生的信息min maxSELECT * FRO ...