该方法jQuery提供的方法,它是当文档结构加载完成时,即形成完整的DOM树时(图片和iframe还没有加载完成)触发。其他几种写法:
该方法表示当页面元素全部加载完成时(包括图片和iframe的加载)触发。在jQuery中有一个同样的方法:$( window ).load(function() {});
当在网页上添加以上两个方法后,当页面加载后控制台输出的结果如下:
支持该事件的:IE、Firfox4+、Opera支持readystatechange事件的每个对象都有一个readyState属性,该属性有5个值:
并不是所有对象都会经历这五个阶段,readyState属性值也不总是连续的。
在与load事件一起使用时,无法预测两个事件触发的先后顺序。在包含较多或较大的外部资源的页面中,会在load事件触发之前先进入交互阶段;而在包含较少或较小的外部资料的页面中,则很难说readystatechange事件会发生在load事件前面。
运用事例代码:
document.addEventListener("readystatechange",function(){ if (document.readyState == "complete") { console.log("readystatechange-complete"); } });
支持该事件的: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~