異步加載 js

一、defer，只支持IE 

defer屬性的定義和用法（我摘自w3school網站） defer 屬性規定是否對腳本執行進行延遲，直到頁面加載爲止。有的 javascript 腳本 document.write 方法來建立當前的文檔內容，其餘腳本就不必定是了。 若是您的腳本不會改變文檔的內容，可將 defer 屬性加入到<script> 標籤中，以便加快處理文檔的速度。

由於瀏覽器知道它將可以安全地讀取文檔的剩餘部分而不用執行腳本，它將推遲對腳本的解釋，直到文檔已經顯示給用戶爲止。 

示例：

<script type="text/javascript" defer="defer"> 
    alert(document.getElementById("p1").firstChild.nodeValue); 
</script>

二、async：

async的定義和用法(是HTML5的屬性)async 屬性規定一旦腳本可用，則會異步執行。

示例：

<script type="text/javascript" src="demo_async.js" async="async"></script>

註釋：async 屬性僅適用於外部腳本（只有在使用 src 屬性時）。

註釋：有多種執行外部腳本的方法： 

    若是 async="async"：腳本相對於頁面的其他部分異步地執行（當頁面繼續進行解析時，腳本將被執行） 

    若是不使用 async 且 defer="defer"：腳本將在頁面完成解析時執行 

    若是既不使用 async 也不使用 defer：在瀏覽器繼續解析頁面以前，當即讀取並執行腳本 

三、建立script，插入到DOM中，加載完畢後callBack

代碼：

function loadScript(url, callback){ 
    var script = document.createElement_x("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: Firefox, Safari, Chrome, and Opera 
        script.onload = function(){ 
            callback(); 
        }; 
    } 
    script.src = url; 
    document.body.appendChild(script); 
}