Cacher is the code snippet organizer for pro developers

#動的に追加したScript要素を順番に読み込み、読み込み完了後に実行

##処理について scrpts配列に格納されたファイルを順番に読み込み
すべてのファイルが読み込まれたタイミングで何かの処理をしたいときに使える

var scripts =['inc.1.js','inc.2.js','inc.3.js'];
var cnt = 1;
function onloaded(e){
    alert(e.target.src + " is successfully loaded");
    if(cnt == scripts.length){
        //すべてのScriptの読み込み完了後の処理
    }
}
var len = scripts.length;
var i = 0;
(function appendScript() {
    var script = document.createElement('script');
    script.src = scripts[i];
    if(typeof scripts[i] == "undefined"){
        return false;
    }
    document.head.appendChild(script);
    if (i++ < len) {
        script.onload = function(e){
        onloaded(e);
         appendScript();
        cnt++;
        }
    }
})();

##onload

script.onload = function(e){
}

onloadで読み込みが完了した後に、コールバック関数を使用して
ファイルを読み込んだ後の処理を加える
また、scriptでの読み込みは、ソースを記述した順番に読み込まないので順序を整えるためにappendScriptを再帰させる

inc.2.jsは大量のコードが記述されているとする
その場合以下のソースは記述した順序を無視してinc.1.js,inc.3.js,inc.2.jsの順番で読み込む

var scripts =['inc.1.js','inc.2.js','inc.3.js'];
for(i=0; i < scripts.length; i++){
    var js = document.createElement("script");
    js.setAttribute("type","text/javascript");
    js.setAttribute("src",scripts[i]);
    document.getElementsByTagName("head")[0].appendChild(js);
}

##type HTML5からタイプしていが不要になったので以下のコードは省ける

script.type = "text/javascript";

##onerror スクリプトの読み込みの失敗を捕捉できる

script.onerror = function( error )
{
    //エラー時の処理
}