常用的两种页面加载判断方法
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
网友评论