[javascript]Javascriptを順番に動的ロード

Javascript Tech

※はてなブログ始めました。（昔のブログ： エンジニアで行きたいです。 - 楽天ブログ）

以下のようにappendChildしていくと解決するように思えるのですが、この場合非同期での読み込みになり、読み込みの順番が保証されないようです。

var ele1 = document.createElement("script");
ele1.type = "text/javascript";
ele1.src = "js/first.js";
document.body.appendChild(ele1);

var ele2 = document.createElement("script");
ele2.type = "text/javascript";
ele2.src = "js/second.js";
document.body.appendChild(ele2);

var ele3 = document.createElement("script");
ele3.type = "text/javascript";
ele3.src = "js/third.js";
document.body.appendChild(ele3);

これでは困るので、ネットの情報 (d:id:os0x:20080827:1219815828) を参考にチェーン式にappendChildする方法を考えてみました。

function JSSyncLoad(srces) {
  if (srces.length == 0) {
    return;
  }

  var sc = document.createElement('script');
  sc.type = 'text/javascript';
  sc.src = srces.shift();

  // クロスブラウザ対応（IE : readyStateはファイルのキャッシュ有無で変わるようです）
  if (window.ActiveXObject) {
      sc.onreadystatechange = function() {
          if (sc.readyState == 'complete' || sc.readyState == 'loaded')  {
            JSSyncLoad(srces);
          }
      };
  } else {
      sc.onload = function(){
            JSSyncLoad(srces);
      };
  }
  body = document.getElementsByTagName('body')[0];
  body.appendChild(sc);
}

使い方は、ロードしたい順にソースパスを配列で渡すだけです。

JSSyncLoad(['js/first.js', 'js/second.js', 'js/third.js']);

以下のブラウザで動作確認しました。