确认js文件载入完全的方法

function loadScript(url, callback) {
        var script = document.createElement("script");
        script.type = "text/javascript";
        // 如果存在readyState属性
        if(script.readyState) {
            script.onreadystatechange = function() {
            if(script.readyState == "loaded" || script.readyState == "complete") {
                script.onreadystatechange = null;  // 移除事件处理器,以免在其他状态阶段被触发
                callback();
            }
         }
        // 否则使用onload事件,当元素加载完全后触发onload事件
        } else {
            script.onload = function() {
                callback();
            }
        }
        // 设置了src属性并且添加到DOM树上后js文件才开始下载
        script.src = url;
        document.getElementsByTagName("head")[0].appendChild(script);
    }
    
    loadScript("hello.js", 
        function(){
            alert("loadScript.js loaded completely!");
        });

以上代码中的loadScript()函数创建一个“script"元素,然后判断script是否有readyState属性,如果有则可以给readystatechange事件绑定事件处理器,当script.readyState为"loaded"或"complete"时表示script载入完全。为了避免readyState在其他阶段时反复触发事件处理器(如loading,interactive,uninitialized),需要移除事件处理器,然后才调用回调函数。(Js高级程序设计P392)

需要注意的是script中的脚本文件只有在设置了src属性,并且被添加到DOM树上之后才会开始下载,所以需要在此之前绑定事件处理器。

另外可以使用元素的load事件,load事件的触发条件是在元素完全载入之后,即在script包含的js文件下载完毕后被触发。所以可以给load事件绑定一个事件处理器,当js文件完全载入后执行该函数。(Js高级程序设计P364)


//如何让脚本的执行顺序遵守你设定的顺序,应用嵌套的格式:
    
     loadScript("file1.js", 
        function() {
            loadScript("file2.js",
                function() {loadScript("file3.js",
                    function() {
                        alert("All files are loaded");
                    });
                });
        });


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值