用domReady代替window.onload

用window.onload事件，让浏览器加载完整个html文档内容之后再执行js脚本。

这样做有一个弊端，就是页面比较庞大的情况下，js脚本要等很久才能执行（基本上是全部的标签，样式，其他脚本图片加载完后）。

所以更多的时候我们用jq的$(document).ready()方法让脚本在dom树加载完毕后立即执行，而不是整个文档内容加载完后再执行脚本。

在不使用jq的情况下我们又应该怎么做呢。

 

现在较新的各大浏览上有这样一个dom事件;DOMContentLoaded;从语义便可理解 dom树加载。

但是这个时间在ie678下又无法兼容，不得已我们只能使用onreadystatechange事件监听document.readyState;

document.readyState有四个状态，如下所示

0-UNINITIALIZED：XML 对象被产生，但没有任何文件被加载。 
1-LOADING：加载程序进行中，但文件尚未开始解析。 
2-LOADED：部分的文件已经加载且进行解析，但对象模型尚未生效。 
3-INTERACTIVE：仅对已加载的部分文件有效，在此情况下，对象模型是有效但只读的。 
4-COMPLETED：文件已完全加载，代表加载成功。 

大致方法差不多出来了，做个降级处理便可以了

function domReady(fn){
       //addEventListener只支持非ie678的高级浏览器；因此我们也可以用这个方法判断浏览器是否ie678;
    if(document.addEventListener){
        document.addEventListener("DOMContentLoaded",fn,false);
    } else {
        document.attachEvent("onreadystatechange",function(){
                        //complete 状态代表dom树加载完毕
            if(document.readyState == "complete"){
    
                fn && fn();
            }    
        });
    }
}

 

转载于:https://www.cnblogs.com/vidy/p/4793036.html