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. 基于mjpg_streamer视频服务器移植【转】

    本文转载自:http://blog.csdn.net/wavemcu/article/details/7539560 MJPG简介: MJPG是MJPEG的缩写,但是MJPEG还可以表示文件格式扩展名 ...

  2. Linux TTY框架【转】

    本文转载自:http://ju.outofmemory.cn/entry/281168 1. 前言 由于串口的缘故,TTY是Linux系统中最普遍的一类设备,稍微了解Linux系统的同学,对它都不陌生 ...

  3. 【python cookbook】【数据结构与算法】1将序列分解为单独的变量

    如果对象是可迭代的(任何序列),则可以进行分解操作,包括元组.列表.字符串.文件.迭代器以及生成器,可通过简单的一个赋值操作分解为单独的变量. 唯一要求:变量的总数和序列相吻合,否则将出错: Pyth ...

  4. Hadoop三种安装模式：单机模式，伪分布式，真正分布式

    Hadoop三种安装模式:单机模式,伪分布式,真正分布式 一 单机模式standalone单 机模式是Hadoop的默认模式.当首次解压Hadoop的源码包时,Hadoop无法了解硬件安装环境,便保守 ...

  5. TI CC2541的狗日的Key

    被突如其来的一个bug困扰了好几天, 起因是, 按键接的红外接收器, 结果发现, 一旦按下之后, IEN1, P0IE的标识位bit5, 被不知道特么的谁归0了, 也就是说, 按键只能被按下一次, 再 ...

  6. asp显示多条记录的代码

    asp显示多条记录的代码 仅供参考 <%for i=1 to RS.PageSize%> <% if RS.EOF then exit for end if %> <tr ...

  7. PBOC APDU命令解析【转】

    转自:http://blog.csdn.net/zuokong/article/details/49335257 版权声明:本文为博主原创文章,未经博主允许不得转载. 应用层发出的命令报文和卡片回送到 ...

  8. linux string 操作

    http://www.cnblogs.com/chengmo/archive/2010/10/02/1841355.html 字符替换 sed -i 's/3306/3308/g' my.cnf my ...

  9. iOS 加载图片选择imageNamed 方法还是 imageWithContentsOfFile？

      Apple官方的文档为生成一个UIImage对象提供了两种方法: 1. imageNamed,其参数为图片的名字: 2. imageWithContentsOfFile,其参数也是图片文件的路径. ...

  10. TEXT、TINYTEXT、MEDIUMTEXT、LONGTEXT选择 和 char varchar varchar2 的区别

    TEXT.TINYTEXT.MEDIUMTEXT.LONGTEXT选择: 储存不区分大小写的字符数据 TINYTEXT 最大长度是 255 (2^8 - 1) 个字符. TEXT 最大长度是 6553 ...