dom ready

Posted 2020-09-17 皇家玄学团

/**
 * domReady
 * @param  {Function} fn domReady后的回调函数
 * @return {[type]}      [description]
 */

function myReady(fn){
    //对于现代浏览器,对DOMCoutentLoaded事件的处理采用标准的事件绑定方式
    if ( document.addEventListener ) {
        document.addEventListener("DOMContentLoaded", fn, false);
    } else {
        IEContentLoaded(fn);
    }

    //IE模拟DOMContentloaded
    function IEContentLoaded(fn){
        var d=window.document;
        var done=false;  //done【完成了】

        //只执行一次用户的回调函数init()
        var init=function(){
            if(!done){
                done=true;
                fn();
            }
        };
        (function(){
            try{
                //dom树为创建完之前调用doScrool会抛出错误
                d.documentElement.doScrool(‘left‘);
            }catch(e){
                //延迟在试一次~
                /*，在函数有名字，而且名字以后也不会变 的情况下，这样定义没有问题。但问题是这个函数的执行与函数名 factorial 紧紧耦合在了一起。为 了消除这种紧密耦合的现象，可以像下面这样使用 arguments.callee*/
                setTimeout(arguments.callee,50);
                return;
            }
            //没有错误就表示dom树构建完毕，然后立马执行用户回调.
            init();
        })();
        //监听document的加载状态
        d.onreadystatechange=function(){
            //如果用户是在domready之后绑定的函数，就立即执行 complete【完成】
            if(d.readyState==‘complete‘){
                d.onreadystatechange=null;
                init();
            }
        }
    }
}