博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

js 自己创建ready多个可以依次加载

Posted on 2015-07-30 17:06  绝交  阅读(632)  评论(0编辑  收藏  举报

js会把相同的方法名给覆盖了,很多时候我们都无法再页面加载的时候写多个onload事件,这样只有最后一个才能起效,所以从网上找了找,最后决定自己写一个,例子很简单,希望有高人来指导指导

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>javascript_window.ready</title>
</head>
<body>
<script type="text/javascript">

(function(w){
    w.readyLength=0;
    w.readyFunction=[];
    w.ready=function(load){
        w.readyFunction[w.readyLength]=load;
        w.readyLength++;
    }
    w.init=function(){
        clearInterval(w.readyById);
        w.readyFunction.reverse();
        while(w.readyFunction.length-1>=0){
            w.readyFunction[w.readyFunction.length-1]();
            w.readyFunction.pop();
            w.readyLength--;
        }
    }
    if('onreadystatechange' in w.document){
        w.document.onreadystatechange=onreadystatechange;
    }else{
        w.readyById = setInterval(onreadystatechange,10);
    } 
    function onreadystatechange(){
        console.log(w.document.readyState)
        if(w.document.readyState == "complete"){
            setTimeout(init,1);
        }else if(w.document.addEventListener){
            w.document.addEventListener( "DOMContentLoaded", init, false );
            w.addEventListener('load',init,false)
        }else{
            document.attachEvent( "onreadystatechange", init );
            w.attachEvent('onload',init)
        }
    }
}(this));
(function(){
window.ready(function(){
    console.log('ready1')
});
window.ready(function(){
    console.log('ready2')
})

window.ready(function(){
    console.log('ready3')
})
}());;;


</script>


</body>
</html>