複数のJavaScriptを同期的に読み込み、実行する

2 Replies
Bookmark this on Hatena Bookmark
LINEで送る

通常、JavaScriptからscriptタグを複数生成すると並列的に読み込みが行われ、場合によっては後に生成したscriptに指定したJavaScriptが先にロードされるということがあります。読み込むJavaScriptによっては順序が必要（プラグインなど）がある場合があり、scriptを作成した順に読み込む必要があります。

jQueryのプラグインとして作成すると便利かなとも思いjQuery pluginsにプロジェクトを作成したのですが、のちのち考えるとプラグインとしてまで使いたいような処理ではなかったのでサイトに個別ページを作成せずに公開用に修正したコードの断片を貼りつけておきます。

もし、jQueryプラグインとして利用したい方は上記のリンクからjsファイルをダウンロードしてください。下記のサンプルコードとは若干使い方が違う（同期・非同期両方に対応しています）ので注意してください。

ということで、作成したコードが以下です。

function load_sync_js(src_list) {
        var rootScript = _create_script(src_list[0]);
        var s = rootScript;
        var head = document.getElementsByTagName('head')[0];
        for (var i=0; i<src_list .length; i++) {
                if (i+1>=src_list.length) break;
                var nextScript = _create_script(src_list[i+1]);
                s.onload = function(){
                        if(s.initialized) return;
                        s.initialized = true;
                        head.appendChild(nextScript);
                };
                s.onreadystatechange = function() {
                        if(s.initialized) return;
                        if (s.readyState == 'complete') {
                                s.initialized = true;
                                head.appendChild(nextScript);
                        }
                };
                s = nextScript;
        }
        head.appendChild(rootScript);
}
function _create_script(src) {
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.src = src;
        s.initialized = false;
        return s;
}
</src_list>

ポイントは、最初に読み込むrootScriptのonload,onreadystatechangeイベントに読み込みが行われていなければ次のscriptタグを作成する処理を再帰的にbindしている点です。

使い方は、以下のようになります。

load_sync_js(['./hoge.js','./foo.js']);

もちろん、外部JavaScriptでも大丈夫です。

load_sync_js(['https://example.com/example1.js','https://example.com/example2.js']);

追記：2011.05.05 20:21
上記に掲載しているスクリプトには、指定したスクリプトのうち、最初と最後のものしか正常にロードされないというバグを含んでいます。jQueryプラグイン版になってしあいますが、下記のものを参考にしてください。

JavaScript Loader jQuery Plugin | jQuery Plugins

関連記事