DOMContentLoaded

DOMContentLoaded 事件

DOMContentLoaded不同的浏览器对其支持不同,所以在实现的时候我们需要做不同浏览器的兼容。

1)支持DOMContentLoaded事件的,就使用DOMContentLoaded事件;

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

  1. 更低的ie还有个特有的方法doScroll, 通过间隔调用:document.documentElement.doScroll("left");

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


    if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', function () {
            document.removeEventListener('DOMContentLoaded', arguments.callee, false);
            fn();
        }, false);
    }

    // 如果IE
    else if (document.attachEvent) {
        // 确保当页面是在iframe中加载时,事件依旧会被安全触发
        document.attachEvent('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();
        }
    }
};
ready(fn)
function fn(){
    console.log(1111)
}
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容