Fomly

Aug 13

The best way to load external JavaScript

作者说的最好的加载JS方法，即是如何无阻塞的加载JS，作者提到了三个技巧

创建两个JS文件，第一个只包含动态加载JS的必要代码，第二个包含除必要的一些初始化的所有内容；
创建加载第一个JS文件的<script>标签，并把它放在页面的最底端，</body>标签里面；
创建第二个<script>标签，加载第二个JS文件和运行附加的初始化代码。

作者还提供了一个例子，这是第一个JS文件的内容

function loadScript(url, callback){
 
    var script = document.createElement("script")
    script.type = "text/javascript";
 
    if (script.readyState){  //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" ||
                    script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {  //Others
        script.onload = function(){
            callback();
        };
    }
 
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

页面上的调用

<body>
 
.. something
 
<script type="text/javascript" src="http://your.cdn.com/first.js"></script>
<script type="text/javascript">
loadScript("http://your.cdn.com/second.js", function(){
    //initialization code
});
</script>
</body>