DOM结构

标签：

1.比较了window.onload与domReady之间的差异

   window.onload=function{fun}fun会在dom树和文件图片等一切资源加载完成之后触发。

   domReady{fun}fun会在dom树构建完成之后触发。而不用等待一些文档和图片资源。

   domReady解决了window.onload因等待资源加载而导致的短时间的事件失效的问题。

   domReady的实现方法

   domReady主要使用了浏览器的DOMcontentLoaded事件的监听，以及用Hack方法实现对IE浏览器模拟DOMcontentLoaded

   IE模拟DOMcontentLoaded主要是用了IE浏览器在DOM树未加载完之前对doScroll的调用会报错。

  function myReady(fn){

    //对于现代浏览器，对DOMContentLoaded事件的处理采用标准的事件绑定方式，false在时间冒泡阶段进行处理
    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会抛出错误

               // arguments.callee表是重新调用此函数
                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();
            }
        }
    }
}

DOM结构

标签：

原文地址：http://www.cnblogs.com/venusTly-activejs/p/5687000.html