动态加载JS文件：并行与串行加载方式-优快云博客

本文详细介绍了如何动态加载JS文件，包括两种加载方式：并行加载和串行加载。通过使用JavaScript函数，可以轻松实现动态加载CSS或JS文件，确保网页的高效加载和用户体验提升。

已知一个需要动态加载的js的文件路径数组，动态加载数组里面所有的js文件。

加载分两种情况：

1. 并行加载，不管js的执行顺序。

2. 串行加载，即一个一个加载，上一个加载完再加载下一个，直到最后。

动态加载js一般都是动态创建一个script，

解决第一种情况：

function loadExternalFile(src,parentElement,tagName){
        var elem = document.createElement(tagName);
        if(tagName==='link'){
            elem.setAttribute('href',src);
            elem.setAttribute('rel','stylesheet');
        }else if(tagName==='script'){
            elem.setAttribute('src',src);
            elem.setAttribute('type','text/javascript');
        }
        parentElement.appendChild(elem);
    }

解决第二种情况：

function loadScript(url, parentEle, tagName, callback){

        var ele = document.createElement(tagName);
        var typeProp = tagName==='script'?'type':'rel';
        ele[typeProp] = tagName==='script'?'text/javascript':'stylesheet';

        if (ele.readyState){  //IE
            ele.onreadystatechange = function(){
                if (ele.readyState == "loaded" ||
                        ele.readyState == "complete"){
                    ele.onreadystatechange = null;
                    callback();
                }
            };
        } else {  //Others
            ele.onload = function(){
                callback();
            };
        }

        typeProp = tagName==='script'?'src':'href';
        ele[typeProp] = url;
        parentEle.appendChild(ele);
    }

第一种情况用法非常简单就不说了。

第二种用法其实也不难：

假设：scripts数组：['a.js','b.js','c.js']

var i=0;
var n=scripts.length;
loadScript(scripts[i],parentEle,'script',loadScriptComplete);

function loadScriptComplete(){
     i++;
     if(i<n){
         loadScript(scripts[i],parentEle,'script',loadScriptComplete);
     }
}

上面的两种方法其实也适用于加载css文件。

转载于:https://www.cnblogs.com/ywxgod/p/4196896.html