DOMReady实现策略
* 在页面的DOM树创建完成后（即HTML解析第一步完成）就触发，而无需等待其他资源的加载，即DOMReady实现策略
* 支持DOMContentLoaded事件的浏览器: 就使用DOMContentLoaded事件
* 不支持DOMContentLoaded事件的浏览器: 使用Hack兼容
* 通过IE中的document.documentElement.doScroll('left')来判断DOM树是否创建完毕
代码实现
function myReady(fn){ 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){ //延迟在试一次， //var func = function() { alert(func === arguments.callee);}func(); //执行上述代码，可以看到alter出来的结果是true，注意，此处用的是“===”，就是说func与arguments.callee对象类型和值都相等。 setTimeout(arguments.callee,50); return; } init(); })(); //监听document的加载状态 d.onreadystatechange = function(){ //如果用户是在domReady之后绑定的函数，就立马执行 if(d.readyState == 'complete'){ d.onreadystatechange = null; init(); } } } }
为什么使用domReady来代替onload？
* onload是需要等待页面所有资源都加载完毕，才触发
* domReady是DOM加载完就触发
我们下面看个例子
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>domReady</title> <script src="domReady.js"></script> </head> <body> <div id="showMsg"></div> <div> <img src="images/1.jpg"/> <img src="images/2.jpg"/> <img src="images/3.jpg"/> </div> <script> var d = document; var msgBox = d.getElementById('showMsg'); var imgs = d.getElementsByTagName('img'); var time1 = null,time2 = null; myReady(function(){ msgBox.innerHTML += "dom已加载！<br>"; time1 = new Date().getTime(); msgBox.innerHTML += "时间戳:" + time1 + "<br>"; }); window.onload = function(){ msgBox.innerHTML += "onload已加载！<br>"; time2 = new Date().getTime(); msgBox.innerHTML += "时间戳:" + time2 + "<br>"; msgBox.innerHTML += "domReady比onload快" + (time2 - time1) + "ms<br>"; }; </script> </body> </html>
