JS动态创建script,插入到DOM中,异步加载,兼容IE

JS异步加载的方式有三种,我这里介绍最好的一种,另外两种你们可以自行查询解决(因为他们都有兼容性问题)

这样做执行js时也不阻塞页面,不但支持异步加载,提高页面加载速度,还支持按需加载。

这里我封装一个函数  传入你要加载的js路径地址,并且计划加载完成后调用里面的某个方法函数

function loadScript (url,callback){
        var script = document.createElement('script');
        script.type = "text/javascript";
        if (script.readyState) { // 如果有这个属性就是IE浏览器
            // 这个函数只有IE浏览器才有,当JS文件被下载完成后就会被触发
            script.onreadystatechange = function() {
                // 当条件满足 表示JS文件以及被下载完成 可以被调用了
                if (script.readyState == 'complete' || script.readyState == 'loaded') {
                    if(callback){
                        callback()
                    }
                }
            }
        } else { // 其他主流浏览器
            script.onload = function() { // 浏览下载完成js后 执行onload回调,此时就可以访问JS文件的函数和变量了
                if(callback){
                    callback()
                }
            }
        }
        script.src = url; // 这一句执行完成,系统就会去下载这个地址里的东西,并且也是异步的去下载
        document.head.appendChild(script); // 当吧script插入
    }
    loadScript('a.js',function(){
        asyhello() // 加载完成后 立即执行当前加载的js里的这个函数
    })

 

posted on 2022-03-02 16:06  马丁的车夫  阅读(1070)  评论(0编辑  收藏  举报