window.onload方法，表示当页面所有的元素都加载完毕，并且所有要请求的资源也加载完毕才触发执行function这个匿名函数里边的具体内容。这样肯定保证了代码在domReady之后执行。使用window.onload方法在文档外部资源不多的情况下不会有什么问题，但是当页面中有大量远程图片或要请求的远程资源时，我们需要让js在点击每张图片时，进行相应的操作，如果此时外部资源还没有加载完毕，点击图片是不会有任何反应的，大大降低了用户体验。那既然window.onload方法不可行，又该怎么做呢？
你肯定想到了jquery中的$(document).ready(function(){})方法了,其实jquery中的domReady应该和window.onload的实现原理是大同小异的。为了解决window.onload的短板，w3c 新增了一个 DOMContentLoaded 事件。
（1）onload实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload=function(){ document.getElementById("header").style.color="red"; } </script> </head> <body> <h1 id="header">我是H1</h1> <img src="1.jpg" alt=""> <img src="1.jpg" alt=""> <img src="1.jpg" alt=""> <!-- 如果大量图片的时候onload需要等待全部加载完成才能将h1标签给渲染成红色 --> </body> </html>
（2）Jquery解决以上问题
$(document).ready()方法和window.onload有什么区别？
(1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。
(2)、$(document).ready() 方法可以在DOM包括图片载入就绪时就对其进行操纵，并调用执行绑定的函数。
tip：jquery就是调用了原生JS事件DOMContentLoaded 来实现相同功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery.js"></script> <script> $(document).ready(function(){ document.getElementById("header").style.color="red"; }) </script> </head> <body> <h1 id="header">我是H1</h1> <img src="1.jpg" alt=""> <img src="1.jpg" alt=""> <img src="1.jpg" alt=""> <!-- 假设大量远程图片正在加载 --> </body> </html>
（3）原生JS事件DOMContentLoaded实现
参考jquery中domReady的实现原理，来看一下java script中domReady的实现策略。
java script实现domReady功能，【domReady.js】兼容各浏览器通用版本的源代码：
function myReady(fn){ //对于现代浏览器，对DOMContentLoaded事件的处理采用标准的事件绑定方式 if ( document.addEventListener ) { document.addEventListener("DOMContentLoaded", fn, false); } else { IEContentLoaded(fn); } //IE模拟DOMContentLoaded function IEContentLoaded (fn) { var d = window.document; var done = false; //只执行一次用户的回调函数init() var init = function () { if (!done) { done = true; fn(); } }; (function () { try { // DOM树未创建完之前调用doScroll会抛出错误 d.documentElement.doScroll('left'); } catch (e) { //延迟再试一次~ setTimeout(arguments.callee, 50); return; } // 没有错误就表示DOM树创建完毕，然后立马执行用户回调 init(); })(); //监听document的加载状态 d.onreadystatechange = function() { // 如果用户是在domReady之后绑定的函数，就立马执行 if (d.readyState == 'complete') { d.onreadystatechange = null; init(); } } } }
粘贴上面代码到新js文件保存。在页面中引入domReady.js文件，引用myReady(回调函数)方法即可。
用原生JS实现跟Jquery的ready相同功能效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="domReady.js"&