美文网首页
DOMContentLoaded

DOMContentLoaded

作者: web佳 | 来源:发表于2018-08-29 13:19 被阅读0次
    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)
    }
    

    相关文章

      网友评论

          本文标题:DOMContentLoaded

          本文链接:https://www.haomeiwen.com/subject/shvhwftx.html