判断document加载过程的几个不同方法_html/css_WEB-ITnose

常用的两种页面加载判断方法

1. $(document).ready()

该方法jQuery提供的方法，它是当文档结构加载完成时，即形成完整的DOM树时（图片和iframe还没有加载完成）触发。其他几种写法：

• $(function(){});
• $().ready(function(){})

2. window.onload

该方法表示当页面元素全部加载完成时（包括图片和iframe的加载）触发。在jQuery中有一个同样的方法：$( window ).load(function() {});

3.两种方法的比较

当在网页上添加以上两个方法后，当页面加载后控制台输出的结果如下：

Html5 中的页面加载方法

1. readystatechange事件

支持该事件的：IE、Firfox4+、Opera支持readystatechange事件的每个对象都有一个readyState属性，该属性有5个值：

• uninitialized (未初始化) ：对象尚未初始化
• loading (正在加载) ：对象正在加载
• loaded (加载完毕) ：对象加载数据完成
• interactive (交互)：可以操作对象，但还没完全加载
• complete (完成)：对象已经加载完毕

并不是所有对象都会经历这五个阶段，readyState属性值也不总是连续的。

在与load事件一起使用时，无法预测两个事件触发的先后顺序。在包含较多或较大的外部资源的页面中，会在load事件触发之前先进入交互阶段;而在包含较少或较小的外部资料的页面中，则很难说readystatechange事件会发生在load事件前面。

运用事例代码：

   document.addEventListener("readystatechange",function(){      if (document.readyState == "complete") {        console.log("readystatechange-complete");       }   });

2. DOMContentLoaded事件

支持该事件的：IE9+、Firefox、Chrome、Safari3.1+、Opera9+

DOMContentLoaded事件在形成完整DOM树之后就会触发，不理会图像、JavaScript文件、CSS文件或其他资源是否已经下载完毕。——《JavaScript高级程序设计》

想看看该事件与前面两种方法的区别，做了一下测试，在html页面中添加了如下代码：

控制台输出结果：

由此可以看出DOMContentLoaded事件是在$(document).ready()事件后执行，确实在DOM加载后执行，忽略了图片的加载。但是如果将$(document).ready()写在一个较大的js文件最后，在head中引入到html文件中，最终的控制台输出结果是：

这个结果让我觉得DOMContentLoaded并没有忽略JavaScript文件的下载我不知道这么理解是否正确，希望各位大神可以指点一二 ~O(∩_∩)O~