javascript IE中的DOM ready应用技巧

 更新时间:2008年07月23日 20:31:34   作者:  
当我们想在页面加载之后执行某个函数,肯定会想到onload了 但onload在浏览器看来,就是页面上的东西全部都加载完毕后才能发生,但那就为时已晚了。
 如果只需要对DOM进行操作,那么这时就没必要等到页面全部加载了。我们需要更快的方法。
      Firefox有DOMContentLoaded事件可以轻松解决,可惜的就是IE没有。 
      MSDN关于JSCRIPT的一个方法有段不起眼的话,当页面DOM未加载完成时,调用doScroll方法时,会产生异常。那么我们反过来用,如果不异常,那么就是页面DOM加载完毕了!
复制代码 代码如下:

function IEContentLoaded (w, fn) {        
    var d = w.document, done = false,        
    // only fire once        
    init = function () {        
        if (!done) {        
            done = true;        
            fn();        
        }        
    };        
    // polling for no errors        
    (function () {        
        try {        
            // throws errors until after ondocumentready        
            d.documentElement.doScroll('left');        
        } catch (e) {        
            setTimeout(arguments.callee, 50);        
            return;        
        }        
        // no errors, fire        
        init();        
    })();        
    // trying to always fire before onload        
    d.onreadystatechange = function() {        
        if (d.readyState == 'complete') {        
            d.onreadystatechange = null;        
            init();        
        }        
    };        
}

这个函数是Diego Perini在07年就发布了这个方法,
而且获得了广泛认同,以至于现在许多开源框架都是借鉴这种方法,譬如JQuery中的ready。

如果以后需要用到IE的DomReady,就是他了。

用法:
IEContentLoaded(  document.getElementById("test") , test  );

function test(){  }

相关文章

  • JS显示日历和天气的方法

    JS显示日历和天气的方法

    这篇文章主要介绍了JS显示日历和天气的方法,涉及JavaScript日期与时间的操作技巧,非常简单实用,需要的朋友可以参考下
    2016-03-03
  • 微信小程序页面间跳转传参方式总结

    微信小程序页面间跳转传参方式总结

    这篇文章主要给大家总结介绍了关于微信小程序页面间跳转传参方式,文中通过示例代码介绍的非常详细,对大家学习或者使用小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • JS实现的表头列头固定页面功能示例

    JS实现的表头列头固定页面功能示例

    这篇文章主要介绍了JS实现的表头列头固定页面功能,涉及javascript针对页面元素及表格样式动态操作相关技巧,需要的朋友可以参考下
    2017-01-01
  • js实时监听文本框状态的方法

    js实时监听文本框状态的方法

    js实时监听文本框状态的方法,这里的方法兼容性不是很好,建议参考脚本之家以前的文章。
    2011-04-04
  • js构建二叉树进行数值数组的去重与优化详解

    js构建二叉树进行数值数组的去重与优化详解

    这篇文章主要给大家介绍了关于js构建二叉树进行数值数组的去重与优化的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-03-03
  • Java设计中的Builder模式的介绍

    Java设计中的Builder模式的介绍

    这篇文章主要介绍了从一个Person例子进行分析重叠构造器模式、Builder模式的使用场景以及运用JavaBeans模式弥补重叠构造器模式的不足
    2018-03-03
  • 微信小程序云开发实现云数据库读写权限

    微信小程序云开发实现云数据库读写权限

    这篇文章主要为大家详细介绍了微信小程序云开发实现云数据库读写权限,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • js实现带搜索功能的下拉框

    js实现带搜索功能的下拉框

    这篇文章主要为大家详细介绍了js实现到搜索的下拉框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • Javascript 中AJAX的图书管理代码实例详解

    Javascript 中AJAX的图书管理代码实例详解

    这篇文章主要为大家详细介绍了AJAX的图书管理代码实例,使用数据库,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • 使用javascript做的一个随机点名程序

    使用javascript做的一个随机点名程序

    这篇文章主要介绍了使用javascript做的一个随机点名程序,经测试,效果相当不错,需要的朋友可以参考下
    2014-02-02

最新评论