DOMContentLoaded与load的区别

onload事件

onload事件所有的浏览器都支持，所以不需要考虑兼容性。

window.onload = function() {}

DOMContentLoaded事件

DOMContentLoaded不同的浏览器对其支持不同，所以在使用时，需要做不同浏览器的兼容。

• IE6、IE7不支持DOMContentLoaded，但支持onreadystatechange事件，该事件的目的是提供与文档或元素的加载状态有关的信息。

• 更低的IE还有个特有的方法doScroll，通过间隔调用：document.docuemntElement.doScroll("left");

  可以检测DOM是否加载完成。当页面未加载完成时，该方法会报错，知道doScroll不再报错时，就代表DOM加载完成了。该方法更接近DOMContentLoaded的实现。

function ready( fn ) {
    if ( docuemnt.addEventListener ) {
        document.addEventListener('DOMContentLoaded', function() {
            document.removeEventListener('DOMContentLoaded', arguments.callee, false);
            fn();
        }, false);
    } else if ( document.attachEvent ) {
        //确保当页面时在iframe中加载时，事件依旧会被安全触发
        document.addachEvent('onreadystatechange', function() {
            if ( document.readyState == 'complete' ) {
                document.detachEvent('onreadystatechange', arguments.callee);
                fn(); 
            }
        });

        //如果是IE且页面不再iframe中时，轮询调用doScroll方法检测DOM是否加载完毕
        if ( document.documentElement.doScroll && typeof window.frameElement === 'undefined' ) {
            try {
                document.documentElement.doScroll('left');
            }
            catch( error ) {
                return setTimeout( arguments.callee, 20 );
            };
            fn();
        }
    }

};