javascript 异步加载

背景:公司使用新的统计埋点,由于弹层出现地方较多,新埋点方法未能及时压入common.js 所以需要自己引入阿里云上的埋点文件

image

问题1:在代码里输入

<script src="xxxx/xx.js"></script>`

后台直出到页面上==script==并未去请求js,导致代码报错

问题2:动态==异步==添加到dom中

由于是 异步的 导致 js 还没加载完 下面的埋点调用就开始执行了 js报onloginit undefind

解决方法

;
(function() {
    /**
     * 动态加载js文件
     * @param  {string}   url      js文件的url地址
     * @param  {Function} callback 加载完成后的回调函数
     */
    var _getScript = function(url, callback) {
        var head = document.getElementsByTagName('head')[0],
            js = document.createElement('script');

        js.setAttribute('type', 'text/javascript'); 
        js.setAttribute('src', url); 

        head.appendChild(js);

        //执行回调
        var callbackFn = function(){
                if(typeof callback === 'function'){
                    callback();
                }
            };

        if (document.all) { //IE
            js.onreadystatechange = function() {
                if (js.readyState == 'loaded' || js.readyState == 'complete') {
                    callbackFn();
                }
            }
        } else {
            js.onload = function() {
                callbackFn();
            }
        }
    }

    //如果使用的是zepto,就添加扩展函数
    if(Zepto){
        $.getScript = _getScript;
    }
    
})();

在js加载完触发回调 里执行


js.onload = function callback() {}

答案在风中飘着
302 声望6 粉丝

\失去人性,失去许多!失去兽性,失去一切!


下一篇 »
动态组件使用