IE系列直到IE9才支持DOMContentLoaded事件,对于IE8及其之前版本,如果html内没有框架,则可以采用document.documentELement.doScroll来判断

是否构建好DOM树;如果html内有框架,则利用document的onreadystatechange事件判断当前DOM树是否构建完毕(框架html内容(只是html文件)加载之后DOM树构建完毕)。

所以可以采用这种方式:

  

  1. /**
  2. * 实现DomContentLoaded的兼容性
  3. * @param callback
  4. */
  5. var onDomContentLoaded = function(callback){
  6. var onlyOnce = true;
  7. var onReady = function(callback){
  8. if(onlyOnce){
  9. onlyOnce = false;
  10. onDomContentLoaded.isDomReady = true;
  11. try{
  12. callback();
  13. }catch(e){
  14. throw(new Error('DOM Ready callback occurs an error!'))
  15. }
  16. }
  17. return;
  18. }
  19.  
  20. if(S.browser.isIe && !('HTMLElement' in window)){ // lt IE9
  21. if(self.top === self){
  22. function s(){
  23. try{
  24. document.documentElement.doScroll('left');
  25. onReady(callback);
  26. return;
  27. }catch(e){
  28. setTimeout(s,50);
  29. }
  30. }
  31. s();
  32. }else{ //包含框架
  33. document.attachEvent('onreadystatechange',function(){
  34. if(document.readyState === 'complete'){
  35. onReady(callback);
  36. document.detachEvent('onreadystatechange',arguments.callee);
  37. }
  38. });
  39. }
  40.  
  41. document.onload = function(){
  42. onReady(callback);
  43. document.onload = null;
  44. };
  45. }else{
  46. document.addEventListener('DOMContentLoaded',function(){
  47. onReady(callback);
  48. document.removeEventListener('DOMContentLoaded',arguments.callee);
  49. },false);
  50.  
  51. document.onload = function(){
  52. onReady(callback);
  53. document.onload = null;
  54. };
  55. }
  56. };

另外,John Resig也在《精通javascript》提出了一种方法来判断DOM是否构建完毕,那就是不断轮训判断

if(document && document.getElementById && document.getElementsByTagName && document.body)是否为true,若为true,则

DOM构建完毕。

最后,给出David Flanagan所给出的whenReady函数,很有技巧性:

  

  1. /*
  2. * Pass a function to whenReady() and it will be invoked (as a method of the
  3. * document) when the document is parsed and ready for manipulation. Registered
  4. * functions are triggered by the first DOMContentLoaded, readystatechange, or
  5. * load event that occurs. Once the document is ready and all functions have
  6. * been invoked, any functions passed to whenReady() will be invoked
  7. * immediately.
  8. */
  9. var whenReady = (function() { // This function returns the whenReady() function
  10. var funcs = []; // The functions to run when we get an event
  11. var ready = false; // Switches to true when the handler is triggered
  12.  
  13. // The event handler invoked when the document becomes ready
  14. function handler(e) {
  15. // If we've already run once, just return
  16. if (ready) return;
  17.  
  18. // If this was a readystatechange event where the state changed to
  19. // something other than "complete", then we're not ready yet
  20. if (e.type === "readystatechange" && document.readyState !== "complete")
  21. return;
  22.  
  23. // Run all registered functions.
  24. // Note that we look up funcs.length each time, in case calling
  25. // one of these functions causes more functions to be registered.
  26. for(var i = 0; i < funcs.length; i++)
  27. funcs[i].call(document);
  28.  
  29. // Now set the ready flag to true and forget the functions
  30. ready = true;
  31. funcs = null;
  32. }
  33.  
  34. // Register the handler for any event we might receive
  35. if (document.addEventListener) {
  36. document.addEventListener("DOMContentLoaded", handler, false);
  37. document.addEventListener("readystatechange", handler, false);
  38. window.addEventListener("load", handler, false);
  39. }
  40. else if (document.attachEvent) {
  41. document.attachEvent("onreadystatechange", handler);
  42. window.attachEvent("onload", handler);
  43. }
  44.  
  45. // Return the whenReady function
  46. return function whenReady(f) {
  47. if (ready) f.call(document); // If already ready, just run it
  48. else funcs.push(f); // Otherwise, queue it for later.
  49. }
  50. }());

DOMContentLoaded实现的更多相关文章

  1. 谈谈DOMContentLoaded:Javascript中的domReady引入机制

    一.扯淡部分 回想当年,在摆脱写页面时js全靠从各种DEMO中copy出来然后东拼西凑的幽暗岁月之后,毅然决然地打算放弃这种处处“拿来主义”的不正之风,然后开启通往高大上的“前端攻城狮”的飞升之旅.想 ...

  2. 事件DOMContentLoaded和load的区别

    1.当 onload 事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了. 2.当 DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,f ...

  3. window.onload 和 DOMContentLoaded区别及如何判断dom是否加载完毕

    http://blog.allenm.me/2010/02/window-onload-和-domcontentloaded/ 其中使用IE不支持DOMContentLoaded,那么判断IE是否加载 ...

  4. window.onload、DOMContentLoaded和$(document).ready()

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  5. DOMContentLoaded和load

    /* * IE9以及现代浏览器新增了一个DOM构建完毕的事件DOMContentLoaded, * 这个事件触发的时间要比load快, * 因为这个事件只涉及DOM的构建,不涉及其他资源的加载. * ...

  6. DOMContentLoaded和jquery的ready和window.onload的顺序

    document.addEventListener('DOMContentLoaded', function(){ alert(1) }); window.onload=function(){ ale ...

  7. HTML5中的DOMContentLoaded 和 touchmove

    Html5的出现确实解决了一部分页面交互的问题,同时它的一些特性还是没能被我们掌握,今天主要聊聊Html5中的DomcontenLoaded和touchmove事件的属性和使用: DomcontenL ...

  8. 利用doScroll在IE浏览器里模仿DOMContentLoaded

    稍微了解一点框架的事件绑定的都知道 window.onload 事件需要在页面所有内容(包括图片.flash.iframe等)加载完后,才执行,但往往我们更希望在 DOM 一加载完就执行脚本,而各大框 ...

  9. DOMContentLoaded事件

    今天查看百度空间源代码,发现多了个util.js文件,打开看看.里面里面定义了addDOMLoadEvent.这是干什么用的? 仔细查看代码,发现在Mozilla添加了DOMContentLoaded ...

随机推荐

  1. iOS 按钮上的标题设置向左向右对齐的方法

    Button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;//左对齐(UIControlContentHo ...

  2. python Django session/cookie

    一, Cookie #cookie # def cook1(request): # print(request.COOKIES) # 查看cooke # # print(request.get_sig ...

  3. 谢欣伦 - OpenDev原创例程 - 网络摄像机WebCamera

    Win7没有预装摄像头软件,打开摄像头通常需要第三方软件来完成.第三方软件,好的要收费,免费的又没几款,其中功能完整的寥寥可数.正好我在做一个数字摄像头视频捕获的功能,经过两周的整理优化,我做了一个简 ...

  4. Silverlight 使用DataContractJsonSerializer序列化与反序列化 Json

    环境说明:Silverlight 5.1,.Net Framework  ​4.0 1.添加引用System.ServiceModel.Web.dll. 因为 System.Runtime.Seria ...

  5. Ajax是如何运行的?

    1.我们需要知道什么是Ajax: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现 ...

  6. serialVersionUID, ObjectInputStream与ObjectOutputStream类,Serializable接口,serialVersionUID的作用和用法

    ObjectInputStream与ObjectOutputStream类所读写的对象必须实现Serializable接口,对象中的transient和static类型成员变量不会被读取和写入 Ser ...

  7. SQL Server差异备份的备份/还原原理

    SQL Server差异备份的备份/还原原理 记住一点:差异备份是基于最后一次完整备份的差异,而不是基于最后一次差异的差异   备份过程: 1-完整备份之后有无对数据库做过修改,如果有,记录数据库的最 ...

  8. node基本理念(事件、多线程、进程)

    关于node的几点理解: 1.所谓的node单线程,是指node的event loop,也就是我们的业务脚本是跑在一个单线程中的,可以理解为主线程: 2.若存在IO操作,例如文件.网络,是单独在线程里 ...

  9. 剑指Offer面试题:19.包含Min函数的栈

    一.题目:包含Min函数的栈 题目:定义栈的数据结构,请在该类型中实现一个能够得到栈的最小元素的min函数.在该栈中,调用min.push及pop的时间复杂度都是O(1). 这里我们要实现的就是min ...

  10. Android学习——第一个NDK程序

    在前面的学习中,我们已经讲解了关于NDK编程的环境搭建流程,简单的使用我们也通过官网本身自带的例子进行说明了.可是相信大家一定还存在这么的一个疑惑:“如果我要自己利用NDK编写一个Android应用, ...