zoukankan      html  css  js  c++  java
  • js 自己创建ready多个可以依次加载

    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>
  • 相关阅读:
    Alpine linux如何配置和管理自定义服务
    nginx仅允许域名访问禁止IP访问
    解决influxdb的log日志输出位置
    python配置文件INI/TOML/YAML/ENV的区别
    window获取本机所有IP
    学习本来的样子
    yum/编译安装Zabbix 5.0 LTS
    redis问题优化
    解决nginx同端口强制跳转https配置ssl证书问题
    通过DNS验证自动申请nginx证书
  • 原文地址:https://www.cnblogs.com/tongchuanxing/p/ready_onload_js_javascript.html
Copyright © 2011-2022 走看看